Ajax的实现

一、JavaScript的ajax

//Ajax
		var xhr;
		if(window.XMLHttpRequest){      //除IE外的浏览器
			xhr = new XMLHttpRequest()
		}else{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");   //IE
		}

		xhr.open('get','http://demo_get.asp',true); //三个参数，method，url，async；
		xhr.send();

	// responseText：作为响应主体被返回的文本。
	// responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。
	// status：响应的HTTP 状态。
	// statusText：HTTP 状态的说明。

		if(xhr.status == 200){
			console.log(xhr.responseText)
		}else{
			console.log("Request was unsuccessful: " + xhr.status)
		}

　　

二、jquery的ajax

（一）最底层方法

$.ajax([settings]);

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

　　

（二）第二层方法

1、load()方法，从服务器加载数据，并把返回的数据放入被选元素中。是局部方法,必须给定主体；

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。发送方式默认为get,存在该参数时变为post；

可选的 callback 参数是 load() 方法完成后所执行的函数名称。它包含三个参数：

　　——responseTxt - 包含调用成功时的结果内容、 statusTXT - 包含调用的状态、 xhr - 包含 XMLHttpRequest 对象

2、get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。是全局方法

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

callback它有俩个参数:data回调参数存有被请求页面的内容，status回调参数存有请求的状态

 1 function showUser(str){
 2         $.get('demo.php?q='+str,function(data, status){
 3              if(status=='error'){
 4                  alert('失败')
 5             }else{
 6                 $('#txtHint').html(data);
 7             }
 8
 9          });
10
11      }

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。俩个参数同上；

1 function showUser(str){
2         $.post('demo.php',{q:str},function(data, status){
3             $('#txtHint').html(data);
4         });
5
6     }

（三）第三层方法

1.$.getScript(url,success(response,status))

在页面初次加载时就取得所有的JavaScript是没有必要的；

url：将要请求的 URL 字符串。

success(response,status)：可选。规定请求成功后执行的回调函数。

额外的参数：

response - 包含来自请求的结果数据

status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

2.$.getJson()

$.getJSON(url,data,success(data,status,xhr))