简说ajax的技术原理,Ajax原理

一、什么是Ajax

Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。

二、Ajax原理

三、Ajax的使用

1.创建Ajax核心对象XMLHttpRequest

var xhr=null;

if (window.XMLHttpRequest)

{

// 兼容 IE7+, Firefox, Chrome, Opera, Safari

xhr=new XMLHttpRequest();

} else{

// 兼容 IE6, IE5

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

2.向服务器发送请求

xhr.open(method,url,async);

//method：请求的类型；GET 或 POST

//url：文件在服务器上的位置

//async：true(异步)或 false(同步)

//注意：post请求一定要设置请求头的格式内容

send(string);

//post请求时才使用字符串参数，否则不用带参数。

xhr.open("POST","test.html",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("fname=Henry&lname=Ford");

//post请求参数放在send里面，即请求体

3.服务器响应处理(区分同步跟异步两种情况)

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

responseXML 获得XML 形式的响应数据。

①同步处理

xhr.open("GET","info.txt",false);

xhr.send();

document.getElementById("myDiv").innerHTML=xhr.responseText;

//获取数据直接显示在页面上

②异步处理

相对来说比较复杂，要在请求状态改变事件中处理。

xhr.onreadystatechange=function() {

if (xhr.readyState==4 &&xhr.status==200) { document.getElementById("myDiv").innerHTML=xhr.responseText;

}

}

//readyState

//0-(未初始化)还没有调用send()方法

//1-(载入)已调用send()方法，正在发送请求

//2-(载入完成)send()方法执行完成，已经接收到全部响应内容

//3-(交互)正在解析响应内容

//4-(完成)响应内容解析完成，可以在客户端调用了