AJAX

一、同步交互与异步交互

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

二、AJAX

asynchronous javascript and xml,直译中文-javascript和xml的异步
AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
Ajax的核心对象

XMLHttpRequerst对象

获取XMLHttpRequest对象

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

属性

1) readyState 请求状态

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

2) status 请求响应值

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

3) responseText 服务器返回的文本

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

方法

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

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

abort() - 取消请求

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

getResponseHeader() - 获取指定的http头

setRequestHeader() - 指定请求的Http头

事件

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

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

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

创建XMLHttpRequest核心对象
固定写法-独立编写
与服务区建立连接
使用XMLHttpRequest对象的open(method,url)
向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value
接受服务器响应的数据

使用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

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

使用XMLHttpRequest核心对象的responseText属性

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

问题：
解析过程比较复杂，而且在拼串或拆串过程容易出错
XML格式的数据
json格式的数据

二、XML

HTML/XHTML/DHTML/XML

HTML: 网页文档
XHTML:更严格的网页文档
DHTML:DOM|DOM
XML: 可扩展的标记语言，可用于配置文件|数据格式
XML的文件为.xml
XML的定义方式与HTML非常相似

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

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

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

XML语法

1）声明

<?xml version="1.0" encoding="utf-8" ?>

version-设置XML文件的版本
encoding-设置XML文件的编码

声明必须出现在0行0列上

2）定义元素

根元素，必须是双标签，只能定义一个

定义元素，元素名可以自定义，既可以双标签也可以是单标签

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

三、DOM解析XML字符串

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