Ajax：异步的javascript和xml
Ajax 的核心是XMLHttpRequest对象，该对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，用户不需要刷新页面也能取得数据。
同步和异步
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
（简单点说：同步就是只能一件一件事的来做，而异步就是可以多件事同时进行）
一、创建ajax过程
(1)创建一个XMLHttpRequest对象
代码：
function createXhr(){ if(typeof XMLHttpRequest !="undefined"){//主流浏览器(firefox、chrome、safari、opera、IE7以上) return new XMLHttpRequest(); }else if(typeof ActiveXObject !="undefined"){//IE浏览器创建 return new ActiveXObject("Microsoft.XMLHTTP"); } } var xhr=createXhr();(2)使用XMLHttpRequest对象的open方法创建一个新的HTTP请求
open方法接收三个参数：要发送请求的类型(get或者post)、请求的url、表示是否异步发送请求的布尔值
false表示同步请求，true表示异步请求
open方法并不会真正发送请求，而只是启动一个请求以备发送
(3)设置响应HTTP请求状态变化的函数.
onreadystatechange()函数
(4)发送HTTP请求.
send方法，该方法接收一个参数，及要作为请求主体发送的数据
调用send方法之后，请求就会被分派到服务器
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
二、get请求
function createXHR(){//创建Ajax对象 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject("Microsoft.XMLHTTP"); } } var xhr=createXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ console.log(xhr.responseText); }else{ console.log("请求失败："+xhr.status); } } }; xhr.open('get',"example.txt",true);//true表示发送异步请求 xhr.send(null);三、post请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function checkname(){ //ajax方式用户名校验 //1、获取用户名信息 var nm=document.getElementById("username").value; //对传递的特殊字符串进行编码处理 tn&age=34 //同时对中文也会进行编码处理 nm=encodeURIComponent(nm); //把用户名信息变为“请求字符串“ var info="name="+nm+"&age=23"; //2、ajax校验 var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ alert(xhr.responseText); } } xhr.open('post','./05.php?addr=beijing'); //post方式传递数据是模拟form表单传递数据 //form表单的post格式数据是通过xml形式传递给服务器的 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(info); } </script></head><body> <h2>ajax用户名的校验(post方式)</h2> <p>用户名：<input type="text" id="username" onblur="checkname()"></p> <p>手机号码：<input type="text" id="usertel"></p></body></html>四、GET和POST的区别，何时使用POST？GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符POST：一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠五、XMLHttpRequest对象
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。responseText 作为响应主体被返回的文本。responseXML 将响应信息格式化为Xml Document对象并返回status 响应的HTTP状态，比如常见的404（未找到）和200（已成功）status Text HTTP状态说明当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState就是XHR请求的状态属性，它本身有5个属性值：
0：未初始化。尚未调用open()方法
1：启动。已经调用open()方法,但尚未调用send()方法
2：发送。已经调用send()方法，但尚未接收到响应
3：接收。已经接收到部分响应数据 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
只要readyState属性的值由一个值变成另一个值，都会触发一次onreadystatechange事件。通常，我们只对readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪。
不过，必须要在调用open()方法之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性
六、http状态码
相关文章
精彩导读
热门资讯
关注我们
