Ajax的原生代码实现和jQuery实现

一、Ajax简介

Ajax（Asynchhronous Javascript And XML）是指一种创建网页应用的网页开发技术。Ajax通过后台与服务器进行少量的数据交换，可以使网页实现异步更新，创建快速动态网页，无需加载整个页面的情况下，能够更新部分网页技术。Ajax不是一种新的编程语言，它是一种独立于web服务器软件的浏览器技术。

在没有Ajax的时候，客户端提交数据后，会等待服务器返回结果，期间出现假死状态，直到服务器返回结果才会载入新的页面，呈现页面请求结果。而使用Ajax就不会出现假死状态，局部刷新数据而不影响整个页面的呈现和使用，同时客户端也没有等待服务器的返回结果的时间开销，展现出良好的交互性。

Ajax的核心是XMLHttpRequest对象，这是一个Javascript对象。下面是XMLHttpRequest对象的一些方法描述：

方法	描述
Abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

接下来我们来看看实现Ajax的两种方式（使用XMLHttpRequest对象做原生代码实现和基于Jquery实现），还有Ajax实现的GET和POST两种方法。

二、原生代码实现Ajax

GET请求：

var request=false;
function createRequest(){
	try{
		request=new XMLHttpRequest(); //创建XMLHttpRequest对象，大部分浏览器
	
}catch(trymicrosoft){
	try{
		request=new ActiveXObject("Msxml2.XMLHTTP"); //高版本Microsoft浏览器
	}catch(othermicrosoft){
		try{
			request=new ActiveXObject("Microsoft.XMLHTTP"); //低版本Microsoft浏览器，如IE5、IE6
		}catch(failed){
			request=false;
		}
	}
}
    if(!request){
	    alert("Error");
	}
}
function getCustomerInfo(){
	//1.创建异步对象
	createRequest();
   //设置参数，与服务器交互信息
	request.open("GET",url,true);
   //发送请求
	request.send(null);
   //注册事件
	request.onreadystatechange=function(){
	    //状态码
	if(request.readyState==0||request.readyState==1||request.readyState==2||request.readyState==3){
           //更新数据
	        document.getElementById("b").innerHTML="aaaaaaaa";
		}
	if(request.readyState==4){
		if(request.status==200){
          //更新数据
			document.getElementById("b").innerHTML=request.responseText;
		}
	}
}
}

POST请求：

var request=false;
function createRequest(){
	try{
		request=new XMLHttpRequest(); //创建XMLHttpRequest对象，大部分浏览器
	
}catch(trymicrosoft){
	try{
		request=new ActiveXObject("Msxml2.XMLHTTP"); //高版本Microsoft浏览器
	}catch(othermicrosoft){
		try{
			request=new ActiveXObject("Microsoft.XMLHTTP"); //低版本Microsoft浏览器，如IE5、IE6
		}catch(failed){
			request=false;
		}
	}
}
    if(!request){
	    alert("Error");
	}
}
function getCustomerInfo(){
	//1.创建异步对象
	createRequest();
   //请求头，POST请求必须要加
 request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   //设置参数，与服务器交互信息
	request.open("POST",url);
   //发送请求
	request.send("name=iii&age=1");
   //注册事件
	request.onreadystatechange=function(){
	    //状态码,判断服务器是否响应
	if(request.readyState==4){
		if(request.status==200){
          //更新数据
			
		}
	}
}
}

注：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。下面是有关的五个状态：

状态	名称	描述
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Sent	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded	HTTP 响应已经完全接收。

三、基于jQuery

jQuery是一个快速、简洁的JavaScript框架，它是一个优秀的JavaScript代码库。利用它实现Ajax相对与原生代码实现好使多了。

GET请求：

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

function ajax_get(){
	$("button").click(function(){
	//url请求地址，function 完成后执行的函数，参数为返回数据和状态码
        $.get(url,function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
  });
});
	}

POST请求:

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

function ajax_post(){
$("button").click(function(){
	//url请求地址，请求发送数据，完毕后执行函数
  $.post(url,
  {
    name:"1",
  },
  function(data,status){
  });
});
	}

四、其他

下面谈谈jQuery简单又强大的Ajax方法：loas() ，load()方法从服务器加载数据，并把返回的数据放入被选元素中。

function test_load(){
	$("button").click(function(){
		//必需url，可选data与请求同一发送查询字符，function方法完成后的执行函数
		//responseTxt结果内容,statusTxt状态,xhr包含 XMLHttpRequest 对象
  $("#div1").load(url,data,function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success"){
	}
    if(statusTxt=="error"){
	}

  });
});
}

Ajax的原生代码实现和jQuery实现

猜你喜欢