header-bg.jpg
封装原生JavaScript实现AJAX
发表于 2018-01-10 21:00
|
分类于 JavaScript
|
评论次数 0
|
阅读次数 2116

attachment/2018/01/10/93851515588884.jpg

一 序言

一般大家使用AJAX都是JQuery已经封装好的 , 虽然JQuery是很好用, 速度很快 , 但是它再快能有原生快吗?而且假如某天我们的项目不需要引入JQuery只需要AJAX的时候, 那么使用原生JS简单封装一个AJAX函数的作用就能够体现出来了 , 本篇文章将介绍如何使用原生JS封装一个简单的AJAX函数 (只兼容现代浏览器) 看仔细了 是现代浏览器!!! 什么?项目经理说要兼容IE6?

咳咳 废话就不多说了 开始正文 

二 AJAX简介

什么是AJAX

AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法（几种技术的结合）。

运用了哪几种技术

1  使用 CSS 和 XHTML 来表示。
2  使用 DOM 模型来交互和动态显示。
3  使用 XMLHttpRequest 来和服务器进行异步通信。
4  使用 JavaScript 来绑定和调用。
那么AJAX的核心技术就是利用了XMLHttpRequest
 

三 XMLHttpRequest

什么是XMLHttpRequest

XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

创建XMLHttpRequest对象

?
1
2
//创建xhr对象 兼容用IE5或者IE6的睿智 (逃
var XHR = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.xhr');
XMLHttpRequest对象所拥有的属性( API )

open( )    发起客户端请求

?
1
2
3
4
5
6
7
8
9
10
11
/**
 * @param string [method] [请求的类型，例如：POST、GET、PUT、PROPFIND。大小写不敏感。]
 * @param string [url] [请求的URL地址，可以为绝对地址也可以为相对地址。]
 * @param bool   [async] [可选] [ true（默认，异步）或 false（同步）。]
 * 注释：当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。
 * 如果服务器繁忙或缓慢，应用程序会挂起或停止。
 * 此时，不需要编写onreadystatechange回调函数，把代码放到 send() 语句后面即可。
 * @param string [bstrUser] [可选] [如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。]
 * @param string [bstrPassword] [可选] [验证信息中的密码部分，如果用户名为空，则此值将被忽略。]
 */
XHR.open(method, url, async, bstrUser, bstrPassword)

getRequestHeader( )    获取指定的相应头部信息

?
1
2
3
4
/**
 * @param string [name] [HTTP请求头的类型 例如Host Referer Content-Type等等]
 */
XHR.getRequestHeader(name)

setRequestHeader( )    设置指定的相应头部信息

?
1
2
3
4
5
6
7
/**
 * @param string [value] [HTTP请求头的类型 例如Host Referer Content-Type等等]
 * @param string [name] [需要设置的内容]
 * 默认情况下，服务器对POST请求和提交Web表单不会一视同仁，
 * 将Content-Type头部信息设置为application/x-www-form-urlencoded (模拟表单提交)
 */
XHR.setRequestHeader(name,value)

send( )    将请求发送到服务器

?
1
2
3
4
5
/**
 * @param string || boolean [string] [将要传输的数据, 仅用于POST请求]
 * 因为GET请求的参数写在url后面, 所以string参数传递null。
 */
XHR.send(string)

abort( )    取消异步请求

?
1
2
3
4
/**
 * 调用此方法可取消异步请求, 调用后, XHR对象停止触发事件, 不允许访问任何与响应相关的属性
 */
XHR.abort()

onreadystatechange   响应完成事件

?
1
2
3
4
5
/**
 * 对于异步请求, 如果需要对服务器获取和操作响应结果, 则在调用send()方法之前,
 * 需要为onreadystatechange属性指定处理方法。该函数用于对服务器响应进行处理。
 */
XHR.onreadystatechange = function(){}

getResponsHeaders( )    获取响应头部信息

?
1
2
3
4
/**
 * @param string [name] 从响应信息中获取指定的HTTP头信息
 */
XHR.getReponseHeader(name)

getAllResponsHeader( )    获取所有的响应头部信息

?
1
2
3
4
/**
 * 从响应信息中获取所有的HTTP头信息
 */
XHR.getALlReponseHeader()

readystate    XMLHttpRequest状态

?
1
2
3
4
5
6
7
8
9
/**
 * 存有XMLHttpRequest的状态, 每当readyState改变时, 就会触发onreadystatechange事件
 * 0(未初始化) 对象已建立, 但是尚未初始化(尚未调用open方法)
 * 1(发送数据) send方法已调用, 但是当前的状态及HTTP头未知
 * 2(数据传输中) 已接收部分数据, 因为响应及HTTP头不全,
 *   这时通过responseBody和responseText获取部分数据会出现错误
 * 3(完成) 数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据
 */
XHR.readyState

status    HTTP请求状态码

?
1
2
3
4
5
6
7
8
9
10
/**
 * 返回当前HTTP请求的状态码
 * 1xx(临时响应)    表示临时响应并需要请求者继续执行操作的状态代码。
 * 2xx(成功)    表示成功处理了请求的状态代码。Eg：200
 * 3xx(重定向)  表示要完成请求, 需要进一步操作。通常这些状态代码用来重定向。Eg：304
 * 4xx(请求错误) 这些状态代码表示请求可能出错, 导致服务器无法正常处理。Eg：403
 * 5xx(服务器错误) [这些状态代码表示服务器在尝试处理请求时发生内部错误。
 *               这些错误可能是服务器本身的错误，而不是请求出错。Eg：500]
 */
XHR.status

statusText    HTTP请求状态文本

?
1
2
3
4
/**
 * 返回当前请求的状态文本 eg：OK (status：200)
 */
XHR.statusText;

responseText    响应信息文本

?
1
2
3
4
/**
 * 将响应信息作为字符串返回
 */
XHR.responseText

responseXML    响应信息XML文本

?
1
2
3
4
/**
 * 将响应信息格式化为Xml Document对象并返回
 */
XHR.responseXML

responseBody    响应信息二进制文本 (只有IE支持)

?
1
2
3
4
/**
 * 将响应信息正文以unsigned byte数组形式返回(二进制数据)
 */
XHR.responseBody

responseStream    响应信息二进制文本(只有IE某些版本支持)

?
1
2
3
4
/**
 * 将响应信息正文以Ado Stream对象(二进制流)的形式返回响应信息
 */
XHR.responseStream

overridMimeType    重写响应的MIME类型

?
1
2
3
4
5
6
7
/**
 * 通常用于重写服务器响应的MIME类型。
 * Eg, 正常情况下XMLHttpRequest只接收文本数据,
 * 但我们可以重写MIME为 'text/plain; charset=x-user-defined',
 * 以欺骗浏览器避免浏览器格式化服务器返回的数据，以实现接收二进制数据。
 */
XHR.overrideMimeType 
AJAX封装

ajax函数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* AJAX
* @param String opt.type [http请求方式, POST或GET]
* @param String opt.url [发送请求的url]
* @param Boolean opt.async [是否为异步请求, true为异步, false为同步]
* @param Object opt.data [AJAX发送的数据]
* @param Function opt.success [AJAX发送并接收成功后的回调函数]
*/
function ajax(opt) {
    opt = opt || {};
    opt.method = !!opt.method === false ? 'POST' : opt.method.toUpperCase();
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {};
    //创建xhrRequest对象 兼容用IE5或者IE6的睿智 (逃
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.xhr');
    var params = [];
    //对特殊字符串进行encodeURIComponent编码
    for (var k in opt.data){
        params.push(encodeURIComponent(k) + '=' + encodeURIComponent(opt.data[k]));
    }
    var postData = params.join('&');
    //判断POST方式或GET方式提交
    if (opt.method.toUpperCase() === 'POST') {
        xhr.open(opt.method, opt.url, opt.async);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(postData);
    }else if (opt.method.toUpperCase() === 'GET') {
        xhr.open(opt.method, opt.url + '?' + postData, opt.async);
        xhr.send(null);
    }
    //判断状态码是否是200
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            opt.success(xhr.responseText);
        }
    }
}
调用方式
?
1
2
3
4
5
6
7
8
9
//默认post方式提交 可指定method:'get' 则以get方式提交   
ajax({
    url : 'test.php',
    data : {some : 123, data:666},
    success:function(res){
        //服务器若返回JSON数据格式 将字符串转化为对象即可
        console.log(JSON.parse(res));
    }
})
服务端PHP文件响应
?
1
echo json_encode($_POST);

控制台显示

发布评论
还没有评论，快来抢沙发吧！