什么是 Ajax？——Ajax 核心要领

AJAX

1. 名词解释

   1、同步
   在一段时间内，只能做一件事情
   同步访问：在访问服务器时，客户端只能等待服务器的响应，不能做其他事情，用户体验非常差
   代表场合：
   1、输入网址访问页面
   2、a标记的默认跳转
   3、submit按钮的表单提交
   2、异步
   在一段时间内，能同时做多件事情。
   异步访问：在向服务器发送请求时，不耽误用户在网页上做其他的操作
   代表场合:
   1、用户名的重复验证
   2、聊天室
   3、股票走势图
   4、搜索建议(百度、京东、淘宝的搜索框)

2. 什么是AJAX

Asynchronous Javascript And Xml
异步的 JS 和 xml
本质:使用JS提供的XMLHttpRequest对象异步的向服务器发送请求，并接受响应数据(格式是xml(已过时))
AJAX中服务器响应回来的是部分的数据，而不是完整的页面，并且 可以以无刷新的效果来更改页面中的局部内容

3. 获取AJAX核心对象 – XMLHttpRequest

标准创建：var xhr=new XMLHttpRequest();
IE8 以下：
var xhr=new
ActiveXObject(“Microsoft.XMLHttp”);
允许通过window.XMLHttpRequest 判断浏览器是否支持XMLHttpRequest( ),如果window.XMLHttpRequest的值是null的话，说明需要通过ActiveXObject（）创建，否则需要通过XMLHttpRequest（）来创建。
ex：
var xhr；
//判断浏览器是否支持XMLHttpReaquest
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest( );
}else{
//浏览器不支持XMLHttpRequest
xhr=new ActiveXObject（“Microsoft.XMLHttp”）;
}

4. XHR的 属性 和 方法

• 1、open( ) – 方法

      作用：创建请求
      语法：open(method ,url , isAsyn )
          1、method ： 字符串类型
             请求方式：  get  post
          2、URL  ：字符串类型
             请求地址
          3、isAsyn ： Boolean 类型
             指定采用同步(false)还是异步(true)的方式发送请求
  

• 2、readyState – 属性

        作用：表示xhr对象的请求状态
        值： 由 0 — 4 ：表示 5个状态
  
           0：请求尚未初始化
           1：已经打开到web服务器的连接，正在向服务器发送请求
           2：请求完成
           3：正在接收服务器端的响应
           4：表示接收响应数据成功
          注意：当readyState的值为4的时候，表示所有的响应都已经接收完毕。
  

• 3、status – 属性

       作用：服务器的响应状态码
       值：   200
        当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位置处，编写的就是请求主体的数据
  

5. 发送异步请求的步骤

       1、创建/获取xhr的对象
       2、创建请求：  xhr.open（）
       3、设置xhr的 onreadystatechange  事件
           判断readyState 以及 status的值，并接受响应
          xhr.onreadystatechange=function(){
   		if(xhr.readyState == 4 && xhr.status ==200){
   	xhr.responseText;
   	}
   }
        4、发送请求：  xhr.send（）
        练习：
            创建一个页面06-ajax-ex.html，创建一个按钮，点击按钮时，向06-ajax-ex.php 异步的发送一个请求，并将 响应 的数据(欢迎光临) 显示在页面的一个div
       6、使用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"];