即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
传统方式我们是以表单形式与服务器通信的。
1.1 异步
指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。
其优势在于不阻塞程序的执行,从而提升整体执行效率。
现实生活中的一个例子
打电话时同步 发消息是异步
XMLHttpRequest可以以异步方式的处理程序。
1.2 XMLHttpRequest
浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面。
下面是一个简单的例子
由于XMLHttpRequest本质基于HTTP协议实现通信,所以结合HTTP协议和上面的例子我们分析得出如下结果:
1.2.1 请求
HTTP请求3个组成部分与XMLHttpRequest方法的对应关系
1、请求行
2、请求头
get请求可以不设置
3、请求主体
注意书写顺序
1.2.2 响应
HTTP响应是由服务端发出的,作为客户端更应关心的是响应的结果。
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间(比如网速慢等原因),所以我们需要监听服务器响应的状态,然后才能进行处理。
onreadystatechange是Javascript的事件的一种,其意义在于监听XMLHttpRequest的状态
1、获取状态行(包括状态码&状态信息)
2、获取响应头
3、响应主体
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
1.2.3 API详解
xhr.open() 发起请求,可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
xhr.readyState = 0时,UNSENT open尚未调用
xhr.readyState = 1时,OPENED open已调用
xhr.readyState = 2时,HEADERS_RECEIVED 接收到头信息
xhr.readyState = 3时,LOADING 接收到响应主体
xhr.readyState = 4时,DONE 响应完成
不用记忆状态,只需要了解有状态变化这个概念
xhr.status表示响应码,如200
xhr.statusText表示响应信息,如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key‘) 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体
注:GET和POST请求方式的差异(面试题)
1、GET没有请求主体,使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send(‘name=itcast&age=10‘)
4、POST需要设置
5、GET效率更好(应用多)
6、GET大小限制约4K,POST则没有限制
问题?如何获取复杂数据呢?
1.2.4 XMLHttpRequest2.0
技术总是在实践中不断更新的,XMLHttpRequest也不例外
1、可以设置超时
2、支持FormData对象管理表单数据
3、支持二进制(文件上传)
4、支持上传进度
1.3 JSON
即 JavaScript Object Notation,另一种轻量级的文本数据交换格式,独立于语言。
1.3.1 语法规则
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、必须要使用双引号
1.3.2 JSON解析
JSON数据在不同语言进行传输时,类型为字符串,不同的语言各自也都对应有解析方法,需要解析完成后才能读取
1、Javascript 解析方法
eavl()、JSON对象 JSON.parse()、JSON.stringify();
JSON兼容处理json2.js
2、PHP解析方法
json_encode()、json_decode()
总结:JSON体积小、解析方便且高效,在实际开发成为首选。
1.4 兼容性
IE5、IE6中使用 ActiveObject("Microsoft.XMLHTTP")
如下图
关于IE的兼容方面,了解即可。
1.5 jQuery中的Ajax
jQuery为我们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$(‘form‘).serialize() 序列化表单(即格式化key=val&key=val)
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用(包括成功和失败)
jQuery Ajax介绍
http://www.css88.com/jqapi-1.9/
第2章JSONP
2.1 JSONP
JSON with Padding
1、原理剖析
其本质是利用了<script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
只能以GET方式请求
2.2 jQuery中的JSONP
jQuery 的$.ajax() 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
dataType: ‘jsonp‘ 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值,默认为callback
jsonpCallback 可以指定相应的回调函数,默认自动生成
http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/