一:AJAX简介
AJAX :Asynchronous JavaScript And XML
指异步 JavaScript 及 XML
一种日渐流行的Web编程方式
Better
Faster
User-Friendly
不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术,是基于JavaScript、XML、HTML、CSS新用法
基于标准的表示技术,使用XHTML和CSS
动态显示和交互技术,使用Document Object Model
数据交换和操作技术,使用XML和XSLT
异步数据获取技术,使用XMLHttpRequest
而JavaScript将以上都结合在一起
二、同步和异步的区别(理解)
异步图例:
三:第一个AJAX案例:编写步骤(重要)
1、创建XmlHttpRequest对象
2、注册状态监控回调函数
3、建立与服务器的异步连接
4、发出异步请求
四、XmlHttpRequest详解:(重要)
属性
readyState:类型short;只读
responseText:类型String;只读
responseXML:类型Document;只读
status:类型short;只读
statusText:类型String;只读
方法:
abort()
getAllResponseHeaders()
getResponseHeader()
open()
send()
setRequestHeader()
事件处理器
onreadystatechange
1、XmlHttpRequest对象:
不同浏览器是不同的。
属性:
l status:只读的。代表着服务器端返回的响应码(200)
l statusText:只读的。代表着服务器端返回的响应吗描述。
l readyState:只读的。代表着当前AJAX引擎处于的状态
0:代表XmlHttpRequest对象刚刚创建。
1:open已经调用(建立与服务器的链接),但是send()还没有调用,还没有发出请求。
2:send方法已经被调用。请求对象已经给了服务器端,但是还没有响应。
3:能够取到响应消息头,但是取不到相应的正文
4:响应结束,可以取到所有响应的内容。
l responseText:只读的。代表着服务器端返回的。r
l
l responseXML:只读的。代表着服务器端返回的是XML的文档(Docuent)。
方法:
abort():终止异步请)
getAllResponseHeaders():得到所有的响应消息头和值。就是一个符串。 getResponseHeader(headerName):得到指定的响应消息头的值。返回一个字符串
open(String method,String url, boolean async):建立与服务器端的链接。async默认是true,异步请求。如果为false,为同步请求。
send(“k1=v1&k2=v2”):向服务器端发送请求正文。get请求,传递null即可。
SetRequestHeader(headerName,headerValue):向服务器端传递请求消息头。
事件:
onreadystatechange:对应一个函数。回调函数。每一次的readyState的值发生变化,都会调用它指定的函数。
五、两个小案例
六、服务器端返回的不同类型的数据:JSON或XML
七、JSON-lib、XStream
八、异步的省市二级联动
相关文章
- 10-27WEB后端_Day07(订单模块、Filter、ThreadLocal、Ajax)
- 10-27Web入门-URL扫描工具dirsearch的使用
- 10-27web前端入门到实战:css3贝塞尔曲线(cubic-bezier)
- 10-27ctf_show-web入门-其他-(396-405)
- 10-2734-10000 web入门 HTML5布局 (div标签使用)持续高强度的投入技术研发工作,才能创造大的价值!
- 10-2724-10000 web开发入门-HTML布局 网页布局
- 10-27.Net Core gRPC入门(二)——Web客户端
- 10-27web前端入门到实战:CSS属性width和height
- 10-27Cobalt Strike从入门到精通之Web Drive-By web钓鱼攻击
- 10-27Cobalt Strike从入门到精通之Web Drive-By web钓鱼攻击