AJAX

一、同步交互与异步交互

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

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

二、AJAX

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

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

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

4. Ajax的核心对象

   XMLHttpRequerst对象

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");

xml

一、接收服务器端的响应数据

1. 使用XMLHttpRequest核心对象的responseText属性

   该属性只能接受文本(HTML)格式

   问题：
   解析过程比较复杂，而且在拼串或拆串过程容易出错

2. XML格式的数据

3. json格式的数据

二、XML

1. HTML/XHTML/DHTML/XML

   HTML: 网页文档
   XHTML:更严格的网页文档
   DHTML:DOM|DOM
   XML: 可扩展的标记语言，可用于配置文件|数据格式

2. XML的文件为.xml

3. XML的定义方式与HTML非常相似

   HTML的元素都是预定义好的
   XML允许自定义元素

4. XML版本

   1.0版本 1.1版本，几乎没人使用

5. XML作用

   作为数据格式-存储数据的地方

6. XML语法

   1）声明

   <?xml version="1.0" encoding="utf-8" ?>
   
   version-设置XML文件的版本
   encoding-设置XML文件的编码
   
   声明必须出现在0行0列上
   

   2）定义元素

   根元素，必须是双标签，只能定义一个
   
   定义元素，元素名可以自定义，既可以双标签也可以是单标签
   

   练习：使用XML定义省份和城市信息

三、DOM解析XML字符串

1. 创建DOM解析XML的解析器，解析器解析XML字符串

   IE浏览器
   
   var parser = new ActiveXObject("Microsoft.XMLDOM");
     
   parser.async = false;
     
   xmlDoc = parser.loadXML(xmlFile);
   
   其他游览器  
   
   var parser = new DOMParser();
   
   var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
   

2. 解析XML元素与解析HTML元素一致

   获取元素最常用的是getElementsByTagName很少使用ById和ByName

PS：
浏览器不允许读取外部的XML文件
浏览器解析符合XML格式的字符串