一、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"){
}
});
});
}