AJAX编程

Ajax的概念
即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

1. 基于web标签的xhtml+css
2. 可使用dom进行动态的显示和交互
3. 使用XML和XSLT(是一种用于将XML转换为任意文本的描述语言)进行数据的交换和操做
4. 使用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方法的对应关系

一、请求行（post方式的请求不用在url中拼接 参数）
xhr.open('post','http://127.0.0.1:3002/getcode')

二、请求头（get 请求能够不设置 请求头）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

三、请求主体（get的参数在url中拼接 ，因此send里面能够传入null或者不传）
xhr.send('phone=13176849023')

• 响应

HTTP响应是由服务端发出的，做为客户端更应关心的是响应的结果。

因为服务器作出响应须要时间（好比网速慢等缘由），因此咱们须要监听服务器响应的状态，而后才能进行处理。

// 当服务器响应以后，会自动的触发onload事件，在这个事件里面咱们能够获取服务器所返回的全部详细数据，而后根据本身的须要进行处理
xhr.onload = function () {
    console.log(this.response);
}

GET和POST请求方式的差别

一、GET没有请求主体，使用xhr.send(null)

二、GET能够经过在请求URL上添加请求参数

三、POST能够经过xhr.send('name=itcast&age=10')

四、POST须要设置 Content-Type:application/x-www-form-urlencoded

五、GET大小限制约4K，POST则没有限制

JSON

即 JavaScript Object Notation，另外一种轻量级的文本数据交换格式，独立于语言。

1.它是用来描述数据的

2.它是字符串

3.永远不要在json文件中添加注释

4.键和值都须要使用双引号，除非这个值是数值或bool值

语法规则
一、数据在名称/值对中

二、数据由逗号分隔(最后一个健/值对不能带逗号)

三、花括号保存对象方括号保存数组

四、键和值都使用双引号包含，除非值是数值或者bool类型

JSON()解析

JSON数据在不一样语言进行传输时，类型为字符串，不一样的语言各自也都对应有解析方法，须要解析完成后才能读取，下面是在js中的解析方法：

一、JSON.parse(json字符串)：将json字符串转换为js对象

二、JSON.stringify(js数组或对象)：将js对象转换为json格式字符串

总结：JSON体积小、解析方便且高效，在实际开发成为首选。

XML XML是一种标记语言，很相似HTML，其宗旨是用来传输数据，具备自我描述性（固定的格式的数据）。 语法规则 一、必须有一个根元素 二、标签名称不可有空格、不能够数字或.开头、大小写敏感 三、不可交叉嵌套 四、属性双引号（浏览器自动修正成双引号了） 五、特殊符号要使用实体 六、注释和HTML同样 虽然能够描述和传输复杂数据，可是其解析过于复杂而且体积较大，因此实现开发已经不多使用了。