ajax异步请求实现详例,JavaScript实现Ajax异步请求实例详解

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

JavaScript实现Ajax异步请求实例详解

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~开发工具与关键技术：Adobe DreamweaverJavaScript

作者：欧日鑫

撰写时间：2020年5月1日

本文主要和大家分享JavaScript实现Ajax异步请求实例详解，ajax现在是一种非常流行的技术，现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能，但是明白其原理也是非常重要的，下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能，以弄清其原理.

在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。

一般来说，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的时候，我们只需要ajax功能，这样引入Jquery比较不划算。

所以接下来便用原生JavaScrpit实现一个简单的Ajax请求，并说明ajax请求中的跨域访问问题，以及多个ajax请求的数据同步问题。

JavaScript实现Ajax异步请求

简单的ajax请求实现

Ajax请求的原理是创建一个XMLHttpRequest对象，使用这个对象来进行异步发送请求，具体实现参考下面代码：

function ajax(option) {

// 创建一个XMLHttpRequest 对象

var xhr =window.XMLHttpRequest ? new XMLHttpRequest() : newActiveXObject("Microsoft.XMLHTTP"),

requestData =option.data,

requestUrl =option.url,

requestMethod =option.method;

// 如果是GET请求，需要将option中的参数拼接到URL后面

if ('POST' !=requestMethod && requestData) {

var query_string ='';

// 遍历option.data对象，构建GET查询参数

for(var item inrequestData) {

query_string +=item + '=' + requestData[item] + '&';

}

// 注意这儿拼接的时候，需要判断是否已经有 ?

requestUrl.indexOf('?') > -1

? requestUrl =requestUrl + '&' + query_string

: requestUrl =requestUrl + '?' + query_string;

// GET 请求参数放在URL中，将requestData置为空

requestData = null;

}

// ajax 请求成功之后的回调函数

xhr.onreadystatechange= function () {

// readyState=4表示接受响应完毕

if (xhr.readyState ==("number" == typeof XMLHttpRequest.DONE ? XMLHttpRequest.DONE : 4)) {

if (200 ==xhr.status) { // 判断状态码

var response =xhr.response || xhr.responseText || {}; // 获取返回值

// if definesuccess callback, call it, if response is string, convert it to json objcet

console.log(response);

option.success&& option.success(response); // 调用回调函数处理返回数据

// 可以判断返回数据类型，对数据进行JSON解析或者XML解析

// option.success&& option.success('string' == typeof response ? JSON.parse(response) :response);

} else {

// if defineerror callback, call it

option.error&& option.error(xhr, xhr.statusText);

}

}

};

// 发送ajax请求

xhr.open(requestMethod,requestUrl, true);

// 请求超时的回调

xhr.ontimeout =function () {

option.timeout&& option.timeout(xhr, xhr.statusText);

};

// 定义超时时间

xhr.timeout =option.timeout || 0;

// 设置响应头部，这儿默认设置为json格式，可以定义为其他格式，修改头部即可

xhr.setRequestHeader&& xhr.setRequestHeader('Content-Type','application/json;charset=utf-8');

xhr.withCredentials =(option.xhrFields || {}).withCredentials;

// 这儿主要用于发送POST请求的数据

xhr.send(requestData);