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"); -
解析XML元素与解析HTML元素一致
获取元素最常用的是getElementsByTagName很少使用ById和ByName
PS：
浏览器不允许读取外部的XML文件
浏览器解析符合XML格式的字符串
网友评论