Ajax笔记

发表于   |   分类于   |     |   阅读次数

一、什么是Ajax？

  • Asynchronous Javascript And XML （异步的JavaScript和XML）
  • AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
  • Ajax只能从服务器端读取数据

二、Ajax原理

HTTP请求方法

  • GET —- 用于获取数据：把数据放在URL上提交（特点：容量低、便于分享、不安全）
  • POST —- 用于上传数据：把数据放在 http content (特点：安全性一般、容量大)

三、编写Ajax

1.创建Ajax对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

  • 创建 XMLHttpRequest对象的语法：

    1
    var oAjax= new XMLHttpRequest();

  • 老版本的 Internet Explorer（IE5 和 IE6）使用ActiveX 对象：

    1
    var oAjax= new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5和IE6，请检查浏览器是否支持MLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：

  • 兼容写法：
    1
    2
    3
    4
    5
    6
    var oAjax = null;
    if(window.XMLHttpRequest) {
    	oAjax = new XMLHttpRequest();
    } else {
    	oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

2.连接服务器

1
oAjax.open('GET','URL',是否异步);

3.发送请求

1
oAjax.send();

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。

4.接收返回

1
2
3
4
5
6
7
8
9
10
11
oAjax.onreadystatechange = function() {
	if(oAjax.readyAtate == 4) {
		if(oAjax.status  == 200) {
			fnSucc(oAjax.responseText);
		} else {
			if(fnFaild) {
				fnFaild();
			}
		}
	}
};

  • onreadystatechange ：当处理过程发生变化的时候执行下面的函数

  • readyState ：ajax处理过程:

    • 0：请求未初始化（还没有调用 open()）。
    • 1：请求已经建立，但是还没有发送（还没有调用 send()）。
    • 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
    • 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
    • 4：响应已完成；您可以获取并使用服务器的响应了。

  • status属性：

    • 200:”OK”
    • 404: 未找到页面

  • responseText：获得字符串形式的响应数据

  • responseXML：获得 XML形式的响应数据

  • 对象转换为JSON格式使用JSON.stringify

  • json转换为对象格式用JSON.parse()

  • 返回值一般为json字符串，可以用JSON.parse(oAjax.responseText)转化为JSON对象

  • 从服务器传回的数据是json格式，这里做一个例子说明，如何利用
    1、首先需要从XMLHttpRequest对象取回数据这是一个JSON串，把它转换为真正的JavaScript对象。使用JSON.parse(oAjax.responseText)转化为JSON对象
    2、遍历得到的数组，向DOM中添加新元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function example(responseText){
    var saleDiv= document.getElementById("sales");
    var sales = JSON.parse(responseText);
        for(var i=0;i<sales.length;i++){
            var sale = sales[i];
             var div = document.createElement("div");
             div.setAttribute("class","salseItem");
            div.innerHTML = sale.name + sale.sales;
            salseDiv.appendChild(div);
        }
    }

ajax图解

5.完整例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function ajax(url,fnSucc,fnFaild) {
	//创建ajax对象
	var oAjax = null;
	if(window.XMLHttpRequest) {
		oAjax = new XMLHttpRequest();
	} else {
		oAjax = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//连接服务器
	oAjax.open('GET',URL,true);
	
	//发送请求
	oAjax.send();
	
	//接收返回
	oAjax.onreadystatechange = function() {
		if(oAjax.readyAtate == 4) {
			if(oAjax.status  == 200) {
				fnSucc(oAjax.responseText);
			} else {
				if(fnFaild) {
					fnFaild();
				}
			}
		}
	};
}

jQuery中的ajax

  • jquery中ajax封装案例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    //ajax请求后台数据
    var btn =  document.getElementsByTagName("input")[0];
    btn.onclick = function(){
    	
    	ajax({//json格式
    		type:"post",
    		url:"post.php",
    		data:"username=poetries&pwd=123456",
    		asyn:true,
    		success:function(data){
    			document.write(data);
    		}
    	});
    }
    //封装ajax
    function ajax(aJson){
    	var ajx = null;
    	var type = aJson.type || "get";
    	var asyn = aJson.asyn || true;
    	var url = aJson.url;		// url 接收 传输位置
    	var success = aJson.success;// success 接收 传输完成后的回调函数
    	var data = aJson.data || '';// data 接收需要附带传输的数据
    	
    	if(window.XMLHttpRequest){//兼容处理
    		ajx = new XMLHttpRequest();//一般浏览器
    	}else
    	{
    		ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    	}
    	if (type == "get" && data)
    	{
    		url +="/?"+data+"&"+Math.random();
    	}
    	
    	//初始化ajax请求
    	ajx.open( type , url , asyn );
    	//规定传输数据的格式
    	ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    	//发送ajax请求（包括post数据的传输）
    	type == "get" ?ajx.send():ajx.send(aJson.data);
    	
    	//处理请求
    	ajx.onreadystatechange = function(aJson){
    		
    	if(ajx.readState == 4){
    			
    		if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
    		{
    			//请求成功处理数据
    			success && success(ajx.responseText);
    		}else{
    			alert("请求出错"+ajx.status);
    			
    		}
    	}
    		
    	}

jQuery中的Ajax
jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON()，第2层使用频率很高

load()方法

  • load()方法是jquery中最简单和常用的ajax方法，能载入远程HTML代码并插入DOM中 结构为：load(url,[data],[callback])
    • 使用url参数指定选择符可以加载页面内的某些元素 load方法中url语法：url selector 注意：url和选择器之间有一个空格
  • 传递方式
    • load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，采用POST

  • 回调函数

    • 必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、XMLHttpRequest对象
    • 只要请求完成，回调函数就会被触发
      1
      2
      3
      4
      5
      $("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
          //respnoseText 请求返回的内容
          //textStatus 请求状态 ：sucess、error、notmodified、timeout
          //XMLHttpRequest 
      })

  • load方法参数
    x
    $.get()和$.post()方法
    load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()或$.ajax()方法

  • 注意：$.get()和$.post()方法是jquery中的全局函数

  • $.get()方法

    • $.get()方法使用GET方式来进行异步请求
    • 结构为：$.get(url,[data],callback,type)
      • 如果服务器返回的内容格式是xml文档，需要在服务器端设置Content-Type类型 代码如下：header(“Content-Type:text/xml:charset=utf-8”) //php

  • $.get()方法参数解析

  • $.post()方法
  • 它与$.get()方法的结构和使用方式相同，有如下区别
    • GET请求会将参数跟张乃URL后进行传递，而POST请求则是作为Http消息的实体内容发送给web服务器，在ajax请求中，这种区别对用户不可见
      • GET方式对传输数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论不受限制）
      • GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史纪录中读取这些数据，如：账号、密码。在某种情况下，GET方式会带来严重的安全问题，而POST相对来说可以避免这些问题
      • GET和POST方式传递的数据在服务端的获取也不相同。在PHP中，GET方式用$_GET[]获取；POST方式用$_POST[]获取;两种方式都可用$_REQUEST[]来获取

$.ajax()方法

  • $.ajax()方法是jquery最底层的Ajax实现，它的结构为$.ajax(options)
  • 该方法只有一个参数，但在这个对象里包含了$.ajax()方式所需要的请求设置以及回调函等信息，参数以key / value存在，所有参数都是可选的

原文出处：Ajax总结篇