12.28学习经验分享#
Bruce_Zhu于2016.12.29
一、同步交互与异步交互
客户端想服务器端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事情的(等)
客户端想服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的(不用等)
二、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;}
-
属性
- readyState 请求状态
0 尚未初始化 1正在发送请求 2请求完成 3请求成功，正在接受数据 4数据接收成功-
status 请求响应值
200 表示请求成功
202 请求被接受但处理未完成
400 错误的请求
404 资源未找到
500 内部服务器错误，如asp代码错误等 responseText 服务器返回的文本
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");
四、接收服务器端的响应数据
-
使用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");
-
解析XML元素与解析HTML元素一致
获取元素最常用的是getElementsByTagName很少使用ById和ByName
PS：
浏览器不允许读取外部的XML文件
浏览器解析符合XML格式的字符串
七、Ajax的XML
1.请求的数据格式-XML
1）客户端如何构建XML格式的数据
构建的数据类型 - 字符串类型
字符串的内容要符合XML格式的语法要求
2）服务器端如何接受符合XML格式的数据
接收到的客户端的请求数据 - 字符串类型，php集成了DOM的相关内容
DOMDocument
DOMElement
DOMNode
2.响应的数据格式-XML
1）服务器端如何构建符合XML格式的数据
设置服务器端的响应头Content-Type值为text/xml
header("Content-Type:text/xml");
构建符合XML格式的数据内容
手动方式构建字符串内容
DOMDocument对象的方法
loadXML(符合XML格式的字符串)
saveXML()方式进行响应
2）客户端如何接受XML格式的数据
使用XMLHttpRequest对象的responseXML属性接收
接收到的就是XML DOM对象(不需要进行解析)