AJAX编程
Ajax的概念
即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。
- 基于web标签的xhtml+css
- 可以使用dom进行动态的显示和交互
- 使用XML和XSLT(是一种用于将XML转换为任意文本的描述语言)进行数据的交换和操作
- 使用XMLHttpRequest进行异步的数据查询和检索等操作。。。
本质:是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。
作用:可以在页面不刷新的情况下,请求服务器,局部更新页面的数据;
异步(Asynchronous [eɪˈsɪŋkrənəs])
指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。
其优势在于不阻塞程序的执行,从而提升整体执行效率。
同步:同一时刻只能做一件事,上一步完成才能开始下一步
异步:同时做多件事,效率更高
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面。
下面是一个简单的例子(获取验证码)
// 这只是一个示例,不用考虑他所实现的功能
var xhr = new XMLHttpRequest()
xhr.open('post','http://127.0.0.1:3002/getcode')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('phone=13176849023')
xhr.onload = function () {
console.log(this.response);
}
由于XMLHttpRequest本质基于HTTP协议实现通信,所以结合HTTP协议和上面的例子我们分析得出如下结果:
- 请求
HTTP请求3个组成部分与XMLHttpRequest方法的对应关系
1、请求行(post方式的请求不用在url中拼接 参数)
xhr.open('post','http://127.0.0.1:3002/getcode')
2、请求头(get 请求可以不设置 请求头)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
3、请求主体(get的参数在url中拼接 ,所以send里面可以传入null或者不传)
xhr.send('phone=13176849023')
- 响应
HTTP响应是由服务端发出的,作为客户端更应关心的是响应的结果。
由于服务器做出响应需要时间(比如网速慢等原因),所以我们需要监听服务器响应的状态,然后才能进行处理。
// 当服务器响应之后,会自动的触发onload事件,在这个事件里面我们可以获取服务器所返回的所有详细数据,然后根据自己的需要进行处理
xhr.onload = function () {
console.log(this.response);
}
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则没有限制
JSON
即 JavaScript Object Notation,另一种轻量级的文本数据交换格式,独立于语言。
1.它是用来描述数据的
2.它是字符串
3.永远不要在json文件中添加注释
4.键和值都需要使用双引号,除非这个值是数值或bool值
语法规则
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、键和值都使用双引号包含,除非值是数值或者bool类型
JSON()解析
JSON数据在不同语言进行传输时,类型为字符串,不同的语言各自也都对应有解析方法,需要解析完成后才能读取,下面是在js中的解析方法:
1、JSON.parse(json字符串):将json字符串转换为js对象
2、JSON.stringify(js数组或对象):将js对象转换为json格式字符串
总结:JSON体积小、解析方便且高效,在实际开发成为首选。
XML
XML是一种标记语言,很类似HTML,其宗旨是用来传输数据,具有自我描述性(固定的格式的数据)。
语法规则
1、必须有一个根元素
2、标签名称不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号(浏览器自动修正成双引号了)
5、特殊符号要使用实体
6、注释和HTML一样
虽然可以描述和传输复杂数据,但是其解析过于复杂并且体积较大,所以实现开发已经很少使用了。