Javascript原生AJAX编写入门

最新推荐文章于 2024-09-19 16:13:24 发布

qq_34495772

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量244

点赞数

分类专栏： WEB前端 Javascript 文章标签： ajax javascript js XMLHttpRequest

本文链接：https://blog.csdn.net/qq_34495772/article/details/80007536

版权

WEB前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Javascript

2 篇文章 0 订阅

订阅专栏

转载请注明链接、原作者。

AJAX（Asynchronous Javascript And XML，异步Javascript和XML）是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX是通过核心对象XMLHttpRequest，使用Javascript向服务器提出请求，并处理响应。这个对象可以由AJAX中的XML来联想记忆。

一、AJAX请求分析

一般的，我们在AJAX的使用上，习惯性的将请求链接、请求方法、回调函数等封装成一个对象，若AJAX请求成功，将触发对象中的成功回调函数。即我们的使用是这样的：

ajax({
    url: "http://...",
    type: 'GET',
    data: {
        id: '12345',
        otherData: 'some-data'
    },
    success: function(data){
        //function body
    },
    erro: function(erroString){
        //function body
    }
});

由上述代码可得，我们将接受的形参，是一个对象。

其次，AJAX内部的简单逻辑可以分为以下几个步骤

（1）得到形参中必要的请求数据：如请求链接、请求类型、数据等；

（2）实例化XMLHttpRequest对象；

（3）分类型进行AJAX请求（本文主要区分GET/POST）；

（4）请求回调。

var ajax = function(param){
    //解析param对象，获得必要参数

    //实例化XMLHttpRequest

    //分类型进行AJAX请求

    //请求回调
}

二、解析param对象

由一中分析可得，param对象中封装了请求链接、请求方式、数据、回调函数等，解析param对象，也就是读取param对象中各个属性对应的值。可以直接通过对象.属性名来访问，同理也可以使用对象[属性名]。

哪些数据是必要呢？

（1）请求链接url是必要的，没有url则无法知晓往哪里发送请求。由此可以得到逻辑：url不存在，需要直接return；

（2）请求方式是必要的，若param对象中不存在请求方式，可以人为规定使用GET方式；

（3）数据不是必要的，这需要根据后端所暴露出的接口分情况讨论，但若存在数据，则需要对其进行处理；

（4）回调函数不是必要的，回调函数的存在与否不会影响到ajax请求的发送，它只是作为请求结束时的一种异步的解决方案。

因此在这一步，我们将针对前三条逻辑，进行代码的实现：

// url必要
var url = param.url;
if (!url) {
    return ;
}
// 请求方式必要
/*
* param.type如果存在则使用param.type值，
* 否则使用'get'，请求类型需要大写（GET/
* POST），所以进行转换。
*/
var type = (param.type || 'get').toUpperCase();
// 数据处理
var data = param.data,
    dataArr = [];
for(var k in data){
    // 键=值的形式存入数组
    dataArr.push(k + "=" + data[k]);
}

三、实例化XMLHttpRequest对象

XMLHttpRequest存在兼容性问题，因此需要做兼容性适配。

// 若XMLHttpRequest存在，则实例化一个XMLHttpRequest对象
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

四、分类型请求（GET、POST）

4.1 get和post

HTTP方法中常见的有get、post、put、delete、head，这五个方法分别应用在不同的场景，而在五个方法中最为常见的是GET和POST两个方法。

区别

GET和POST最明显可见的区别，就在传输方式和安全性上。具备一定知识的同学一定知道，GET方法会将参数、数据暴露在url地址栏上，POST则将数据传入请求体中；其次在安全性上post会比get安全的多。

其实这两点已经是最为主要的区别了，更多的区别则在于这两点的拓展上：

（1）GET在浏览器回退时是无害的，POST则会再次发送请求；

（2）GET产生的URL可以收藏，POST不可以；

（3）GET请求会被浏览器主动缓存，POST需手动设置；

（4）GET请求只支持url编码，POST支持多种编码方法；

（5）GET请求的参数会被保存在历史记录中（URL保存在历史记录中），POST的参数不会保留；

（6）GET请求在URL中传送的参数有限制（其实是URL长度有限制），POST没有限制；

（7）GET请求只接受ASCII字符，POST可接受有数据类型的参数；

（8）GET请求参数通过URL传递，POST则放置在Request Body中；

（9）POST比GET安全，因为GET请求的参数直接暴露在URL上，所以不能放置敏感信息，如密码等。

4.2 xhr.open(method, url, async)

method：string，请求方式：'GET'/'POST'；

url：string，请求地址；

async：boolean，是否异步请求：true/false。

4.3 xhr.setRequestHeader(header, value);

设置请求头。

header：请求头名；

value：该请求头所对应的值。

一般的，当我们创建一个异步对象XMLHttpRequest同时post方式向后台传输数据的时候。我们要设置异步对象的xhr.setRequestHeader成员的值为：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.4 xhr.send(message)

message：仅当POST请求时可用。

4.5 实现

使用if-else分支实现分类型请求。

一般的AJAX请求

如果是get请求，则需要拼接url地址，即拼接成 http://.....?属性1=值&属性2=值 这种形式，然后发送；如果是post请求，则需要将数据包含在request body中。

if('GET' == type){
    url = url + dataArr.join('&');
    xhr.open(type, url);
    xhr.send();
} else {
    xhr.open(type, url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencode");
    xhr.send(dataArr.join('&'));
}

五、请求回调

xhr.onload提供了xhr请求结束时的相关操作。在这一阶段，进行事件回调。

xhr.onload = function(){
    if(xhr.status === 200){//返回的http状态码为200即http请求为ok
        var res;
        if(param.success && param.success instanceof Function){//如果存在param.success并且是函数
            res = xhr.responseText;
            if(typeof res === 'string'){
                res = JSON.parse(res);
                param.success.call(xhr, res);
            }
        }
    }
}

六、完整代码

var ajax = function(param){
	var url = param.url;
	if (!url) {
		return ;
	}
	var type = (param.type || 'get').toUpperCase(),
		data = param.data,
		dataArr = [];
	for (var k in data) {
		dataArr.push(k + "=" + data[k]);
	}
	var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
	if ('GET' === type) {
		url += "?" + dataArr.join('&');
		xhr.open(type, url);
		xhr.send();
	} else {
		xhr.open(type, url);
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send(dataArr.join('&'));
	}
	xhr.onload = function(){
		if(xhr.status === 200) {
			var res;
			if (param.success && param.success instanceof Function) {
				res = xhr.resposeText;
				if(typeof res === 'string'){
					res = JSON.parse(res);
					param.success.call(xhr, res);	//回调
				}
			}
		}
	}
}

七、深入了解AJAX