AJAX初步认识

一、同步交互与异步交互

1. 客户端想服务器端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事情的(等)

2. 客户端想服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的(不用等)

二、AJAX

1. asynchronous javascript and xml,直译中文-javascript和xml的异步

2. AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求

3. 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容

4. Ajax的核心对象

   XMLHttpRequest对象

5. 获取XMLHttpRequest对象

   function getXhr(){
   
   var xhr = null;
   if(window.XMLHttpRequest){
       //除IE外的其他浏览器
       xhr = new XMLHttpRequest();
   }else{
       
       xhr = new ActiveXObject("Microsoft.XMLHttp");
   
   }
   
   return xhr;
   }
   

6. 属性

   1. readyState 请求状态

   0 尚未初始化
   1正在发送请求
   2请求完成
   3请求成功，正在接受数据
   4数据接收成功
   

   2. status 请求响应值

   200 表示请求成功
    202 请求被接受但处理未完成
    400 错误的请求
    404 资源未找到
    500 内部服务器错误，如asp代码错误等
   

   3. responseText 服务器返回的文本

   4. responseXML 服务器返回的xml，可以当做DOM处理

7. 方法

   open(method,url) - 与服务端建立连接

   send() - 向服务器端发送请求

   abort() - 取消请求

   getAllResponseHeaders()
   得到响应的所有http头

   getResponseHeader()
   获取指定的http头

   setRequestHeader()
   指定请求的Http头

8. 事件

   onreadystatechange事件
   作用 - 监听服务端的通信状态改变

   当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件

三、实现ajax的异步交互步骤

1. 创建XMLHttpRequest核心对象
   固定写法-独立编写

2. 与服务区建立连接
   使用XMLHttpRequest对象的open(method,url)

3. 向服务器发送请求
   使用XMLRequest对象的send()方法
   请求参数的格式 - key=value

4. 接受服务器响应的数据

   使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态

   使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4)

   使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200)

   使用XMLHttp对象的responseText属性，接受服务器端的响应数据

注意：get与post方式

  get请求方式

    send()方法不起作用，但是不能被省略
    xhr.send(null) 请求参数，添加到url?key=value
     
  post请求方式

    必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value

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

异步交互基本步骤

    
    


    用户名：

    提交