AJAX
AJAX,即 Asynchronous(异步的) JavaScript and XML。
AJAX不是一门新的语言,而是对现有技术的综合运用。
其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新。即在不重载整个网页面的情况下,对网页的某部分进行更新。
AJAX 的好处
AJAX 可以实现异步通信效果,实现页面局部刷新,带来更好的用户体验:按需获取数据,节约宽带资源。
AJAX 的缺点
- AJAX 不支持浏览器的 back 按钮。
- 安全问题。AJAX 暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制
异步
指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序,不依赖程序本身的书写顺序,相反则为同步。其优势在于不阻塞程序的执行,从而提升整体的执行效率。
实现异步加载的方式
- defer 只支持ie
- async html5的属性
- 动态创建script
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
- 由于javascript的动态性,还有很多异步加载的方法:XHR Injection、XHR Eval、Script In Iframe、Script defer属性等等。
- XHR Injection(XHR 注入):通过XMLHttpRequest来获取javascript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
另外:实现异步编程有哪些方式。(摘自Javascript异步编程的4种方法)
- 回调函数 callback
function f1(callback){
setTimeout(function () {
//f1的任务代码
callback();
},1000);
}
回调函数的优点是简单,易理解和部署,缺点是不利于代码阅读和维护,各部分之间高度耦合,流程会很混乱,而且每个任务只能指定一个回调函数。
- 事件监听
f1.on('done', f2);
function f1() {
setTimeout(function () {
//f1的任务代码
f1.trigger('done');
}, 1000);
}
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以“去耦合”,有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。
- 发布/订阅
采用的是Ben Alman 的 Tiny Pub/Sub
jQuery.subscribe("done", f2);
function f1() {
setTimeout(function () {
//f1的任务代码
jQuery.publish("done")
}, 1000);
}
发布/订阅模式(public-subscribe pattern),又称观察者模式(observer pattern)。
f1执行完成后向信号中心发布done信号,从而引发f2的执行。
f2执,行完成后可以取消订阅。
jQuery.unsubscribe("done", f2);
这种方法的性质和“事件监听”类似,但是明显优于后者。因为我们可以通过查看“消息中心”。了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
- Promise对象
ES6是由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。
从语法上说,Promise是一个对象,可以获取异步操作的结果,它有三种状态。
- Pending(进行中)
- Resolved(已完成,又称Fulfilled)
- Rejected(已失败)
只有异步操作的结果,可以决定当前是哪一种状态。
一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能: - 从 Pending 变为 Resolved。
- 从 Pending 变为 Rejected。
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(error) {
// failure
});
扯远了...
同步异步的区别
- 同步:阻塞的
浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面。 - 异步:非阻塞的
浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新。
XMLhttpRequest
XMLhttpRequest可以以异步方式的处理程序。
浏览器内建对象,用于在后台与服务器通信(交换数据),由此我们便可实现对网页的部分更新,而不是刷新整个页面。
一个基本的例子:
//实例化
var xhr = new XMLHttpRequest();
//发起一个http请求
xhr.open('get', 'index.php');
xhr.send(null);
//接收服务器响应
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var result = document.querySelector('.result');
result.innerHTML = xhr.responseText
}
}
请求
XMLHttpRequest 本质基于 HTTP 协议实现通信。HTTP 请求 3 个组成部分与 XMLHttpRequest 方法的对应关系:
- 请求行
xhr.open('get', 'index.php')
- 请求头(get 请求可以不设置)
xhr.setRequestHeader('Content-Type', 'text/html');
- 请求主体
xhr.send(null);
响应
HTTP响应 3 个组成部分与 XMLHttpRequest 方法或属性的对应关系。
由于服务器做出响应需要时间(比如网速慢等原因),所以我们需要监听服务器响应的状态,然后才能进行处理。
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var result = document.querySelector('.result');
result.innerHTML = xhr.responseText;
}
}
onreadystatechange 是 Javascript 的事件的一种,其意义在于监听 XMLHttpRequest 的状态。
- 获取状态行(包括状态码和状态信息)
xhr.status
xhr.statusText
- 获取响应头
//获取指定头信息
xhr.getResponseHeader('Content-Type');
//获取所有响应头信息
hr.getAllResponseHeaders();
- 响应主体
xhr.responseText;
xhr.responseXML;
我们需要检测并判断响应头的 MIME 类型后确定使用 request.responseText 或者 request.responseXML.
创建一个 ajax
var xhr = null;//创建对象
if (window.XMLHttpRequest) {
xhr = new XHLHttpRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("方式", "地址", "标志位");//初始化请求
xhr.setRequestHeader("","")//设置相应头信息
xhr.onreadystatechange = function () {}//指定回调函数
xhr.send();//发送请求
简述ajax的过程
- 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象。
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
- 设置响应 HTTP 请求状态变化的函数。
- 发送 HTTP 请求
- 获取异步调用返回的数据
- 使用 JavaScript 和 DOM 实现局部刷新
get 和 post 请求方式的差异
- get 请求没有请求主体,使用 xhr.send(null)。
- get 可以通过在请求 URL 上添加请求参数。
- post 可以通过 xhr.send('name=i&age=10')。
- post 需要设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- get 效率更好(应用比较多)。
- get 大小限制约 4K,post则没有限制。
get 和 post 的区别,什么时候使用 post 请求
- get:一般用于信息获取,使用 URL 传递参数,对所发信息的数量也有限制,一般在 2000 个字符,有的浏览器是 8000 个字符。
- 一般用于修改服务器上的资源,对所发送的信息没有限制。
以下情况中,使用post 请求:- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(post 没有数据量限制)
- 发送包含未知字符的用户输入时,post 比 get 更稳定也更可靠。
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
最后
忽然发现已经忘了 ajax 的一些理论基础方面的知识了... 面试忽然问起,恩,懵住了... 所以学习嘛,还是要时常复习。