AJAX编程(Asynchoronous Javascript And XML)
不是一门新的语言,时对现有持术的综合利用
1》基于web标签的xhtml+css
2》可以使用dom进行动态的显示和交互
3》使用XML和XSLT(时一种用于XML文档转换任意文本的描述语言
进行数据的操作和交换
4》使用XMLHttpRequest进行异步的数据查询和检索等操作
本质实在HTTP协议的基础上以异步的方式通过XMLHttpReques对象与服务器
进行通信
作用:在页面不刷新的情况下,请求服务器,局部更新页面的数据
异步XMLHttpRequest
指某段程序执行时不会阻塞其他程序执行,其表现形式为程序的执行顺序不
依赖程序本身的书写顺序,相反则为同步
其优势在于不阻塞程序的执行,从而提升整体执行效
客户端发送页面请求,在不影响自己的前提下页面将请求的程序发送给异步
对象去执行,高效的处理程序,返回处理的结果
1》创建异步对象
var xhr = new XMLHttpRequest()
2》请求行
open(请求方式,请求url)
get请求如果有参数就需要在url后面拼接参数,记得使用+号
post如果有参数,就在请求体中传递
3》请求头
strRequestHeader('key':' value')
get方式不需要设置请求头
post方式需设置Content-Type:application/x-www-form-urlencoded
4》请求体 (发送请求)
send(参数,key=value&key=value)
get不需要传递参数
post如果有参数就传递参数
响应
HTTP响应式有服务器端发出的,作为客户端更关心的是响应结果
HRTTP响应3个组成部分于XMLHttpRequest方法或属性对应的位置
由于服务器做出响应需要时间(网速慢等原因)所以我们需要监听服
务器的状态,才能进行处理
响应报文
1》报文行:响应状态码 响应状态信息 200 ok
xhr.status:可以获取当前服务器的响应状态 200 》成功
2》报文头:服务器返回给客户端的一些额外信息
xhr.getAllResponseHeaders:可以获取所有响应头信息
3》报文体:服务器返回给客户端的数据 responseText:普通字符串responseXML:符合
xml格式的字符串
xhr.responseTEXT:可以获得报文体返回的内容
xhr.responseXML:可以获得下XML数据中的返回内容
4》监听状态
xhr.onreadystatechange=function(){}
一个真正成功的响应应该有两个方面
1》服务器成功响应
2》数据已经回到客户端并且可以使用了
监听异步对象的响应状态 readystate
1》0 创建了异步对象,但是还没有真正的去发送请求
2》1 调用了send方法,正在发送请求
3》2 send方法执行完毕了,已经收到服务器的响应内容(但是内容都是
原始内容,还不可以使用)
4》3 正在解析数据
5》4 响应内容解析完毕,可以使用
GET于POST请求方式的差异
1》GET没有请求主体,使用xhr.send(null)
2》GET可以通过在请求URL上添加请求参数
3》POST可以通过xhr.send( ' name = itcast&age = 10 ')
4》POST需要设置Content-Type:application/x-www-form-urlencoded
5》GET大小限制4K,POST则没有限制
获取复杂数据
1》XML extensible markup language
XML是一种标记语言,很类似HTML,其宗旨是i用来传输数据】
具有自我描述性(固定的格式数据)
语法规则
1》数据在名称 / 值对中
2》数据由逗号分隔(最后一个键 / 值对不能带逗号)
3》花括号保存在想方括号保存数据
4》 使用双引号
2》JSON解析
JSON数据在不同语言进行传输时,类型为字符串,不同的语言各自也
都对应解析方法,需要解析完成后才能读取
1)Javascript 解析方法
JSON对象 :JSON.parse()
JSON.stringify()
2)PHP解析方法
json_encode(),json_decode()
总结:JSON体积小,解析方便且高效,在实际开发中为首选
|
|