首先要明确一个问题,AJAX是什么,为什么要用AJAX?
Q1:什么是AJAX
A1:AJAX==>Asynchronous JavaScript and XML==>异步的JavaScript和XML
是与服务器交换数据,并能够在无需加载整个页面的情况下更新部分页面(即:异步局部更新);AJAX的基础是XMLHttpRequest,用于在后台与服务器交换数据
【AJAX包含的技术:XHTML+CSS;使用DOM进行动态显示与交互;使用XML和XSLT进行数据交换以及相关操作;使用XMLHttpRequest进行异步数据查询;使用JS将所有东西联系起来】
Q2:为什么要使用AJAX?
A2:因为传统的网页想要更新内容或者提交一个表单的时候需要重新加载整个页面
【A:通过异步模式提升了用户体验;优化了浏览器和服务器之间的传输,减少了不必要的数据往返,减少了带宽占用;AJAX引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大量用户下的服务器负载】
Q3:同步与异步?
然后,来看看一个AJAX的实现流程是怎样的:
1)创建XMLHttpRequest对象
2)创建一个新的Http请求,并指定该HTTP请求的方法
![](https://img.haomeiwen.com/i11406244/4762dea9891f6fbe.png)
【URL是服务器上文件的路径,可以是绝对路径也可以是相对路径】
【如果是POST方法就对send(string)进行参数设置;如果你需要向提交表单那样POST数据,使用setRequestHeader(header,value);当然如果是要用GET方法提交数据,那么可以在URL中加入需要的参数】
![](https://img.haomeiwen.com/i11406244/fab36945a75907ae.png)
【GET请求更简单更快,大部分情况下都可以使用,但是在一下情况下使用POST:a:更新服务器上的文件或数据库;b:向服务器发送大量数据,因为POST没有数量限制;c:发送包含未知字符的用户输入时,POST比GET更稳定更可靠】
【async的选择,使用AJAX必须设置为true。async=true ==>异步,在等待服务器响应时可以执行其他的脚本,当响应后就对响应进行处理,在onreadystatechange中写执行函数;async=false =>同步,JS会等到服务器响应就绪以后才继续执行,如果服务器忙或者缓慢,程序将被挂起或停止,此时不需要写onreadystatechange】
3)服务器响应请求,并做出响应的处理,在readystate==4&&status==200时
![](https://img.haomeiwen.com/i11406244/6f16f28abb56168e.png)
【responseText:得到字符串形式的数据,json串,可以用JSON.parse()来转换;responseXML:得到XML形式的响应数据。】
【onraedystatechange会触发5次,分别对应0~4的状态变化,即:0=请求未初始化;1=服务器链接已建立(open方法成功调用后);2=请求已经接收(表示服务器答应了客户端的请求);3=请求处理中;4=请求已经完成,且响应就绪】
4)请求的数据在页面进行局部刷新(显示)
====
未完待续...........
网友评论