AJAX

1.获取AJAX核心对象 - XMLHttpRequest

标准创建： var xhr = new XMLHttpRequest();

IE8以下：  var xhr = new ActiveXObiect("Microsofe.XMLHttp");

允许通过 window.XMLHttpRequest 判断浏览器是否支持XMLHttpRequest()  。如果 window.XMLHttpRequest 的值是 null 的话，说明需要通过 ActiveXObiect() 创建，否则需要通过 XMLHttpRequest() 来创建

                var xhr; 
		//判断浏览器是否支持 XMLHttpRequest
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			//浏览器不支持 XMLHttpRequest
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}

2. XHR 的常用属性和方法

1.open()（方法） ：创建请求

语法：open ( method,url,isAsyn )

  （1）method  ： string类型

    请求方式：get ，post，……

  （2）url  ： string类型

    请求地址

  （3）isAsyn  ： boolean类型

    指定采用同步（flase）还是异步（true）的方式发送请求

2. readyState（属性） ：表示 xhr 对象的 请求状态

值：由 0-4 表示5个状态

  0 ：请求尚未初始化

  1 ：已经打开到WEB服务器的状态，正在向服务器发送请求

  2 ：请求完成

  3 ：正在接受服务器端的响应

  4 ：接受响应数据成功

  注意：当readyState的值为4时，表示所有的响应都已经接受完毕

3.status （属性） ：服务器的响应状态码

  当 status 的值是200时，表示服务器已经正确的给出所有响应

4.onreadystatechange  （事件） ：当 xhr 的 readyState 属性值发生改变的时候，要自动激发的操作

语法：

	xhr.onreadystatechange = function(){
		//每当xhr.readyState的值，发生变化时，要执行的操作。

		//判断 xhr.readyState 为4的时候 并且 xhr.status 为 200的时候，才能获取正常的响应数据
		if(xhr.readyState == 4 && xhr.status == 200){
			//可以接收响应回来的数据 
			//responseText 属性，表示服务器响应回来的文本
			var resText = xhr.responseText;
		}

	}

5.　send()（方法） ：发送请求

语法： send(body);

  body：请求主体

  没有请求主体的提交方式，body位置处要写 null ，有请求主体的提交方式，body位置处，写请求主体的数据

3.发送异步请求的步骤

1.创建 / 获取 XHR 对象

2.创建请求 ：xhr.open()

3. 设置 xhr 的 onreadstatechange 事件，判断readState 以及 status 的值，并接受响应

4.发送请求 ： xhr.send()

练习：

在一个html网页中使用按钮实现异步访问功能，点击按钮时可以将php的数据显示在按钮上部

common.js

function $(id){
    return document.getElementById(id);
}
function createXhr(){
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsofe.XMLHttp")
    }
    return xhr;
}

index.html

JS:
        <script src="common.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //单击按钮时向服务器发送异步请求并接受响应的数据，显示在 msg-show 里
            function getInfo(){
                //1.创建 / 获取 xhr
                var xhr = createXhr();
                //2.创建请求
                xhr.open("get","05-testajax.php",true);
                //3.设置 onreadystatechange（回调函数）
                xhr.onreadystatechange = function(){  //匿名函数
                    if(xhr.readyState==4&&xhr.status==200){
                        //接受响应数据
                        var resText = xhr.responseText;
                        $("msg-show").innerHTML=resText;
                    }
                } 
                //4.发送请求
                xhr.send(null);
            }
        </script>

body:
        <div id="msg-show"></div>
        <button type="button" onclick="getInfo()">发送异步请求</button>

 4.使用GET提交方式，发送请求数据

在请求地址后，拼接请求参数（查询字符串）

……

xhr.open("get","xx.php?name=value&name1=value1",true);

……

ex:
xhr.open("get","check.php?uname=zs&upwd=123",true);
在 check.php 中，获取 uname 和 upwd 值
    $uname=$_REQUEST["uname"]; 
    $upwd=$_REQUEST["upwd"];

5.使用 POST 方式提交请求

1.提交的请求数据需要按照指定的格式拼好，放在 send() 中传递

代码： xhr.send("name1=value1&name2=value2");

2.设置一个请求消息头

POST 提交方式，必须将 Content - Type 的请求消息头更改为 application / x-www-form-urlencoded

在发送之前增加的代码：

xhr.setRequsetHeader("Content-Type","application/x-www-form-urlencoded");