【JavaScript】Ajax异步请求，JavaScript和JQuery写法，附JSONP跨域写法
（1）JS封装Ajax请求写法：
function loadXMLDoc() {
var xmlhttp;
//1,创建XMLHttpRequest对象
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{ //兼容ie5，ie6
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
//readyState 属性改变时，就会调用onreadystatechange函数
xmlhttp.onreadystatechange= function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var date = JSON.parse(xmlhttp.responseText);
console.log(date);
var code = date.code;
document.getElementById("hehe").innerHTML = code ;
}
//readyState 会从1-4的变化，错误的形式根据状态判断
}
//GET请求写法：
//xmlhttp.open("GET","test.php?id=23&name=45",true);
//xmlhttp.send();
//POST请求写法：
var data = "name=1&id=10";
xmlhttp.open("POST","test.php",true);
//POST请求需要写请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}（2）JS封装多个Ajax请求（封装固定请求，实现不同回调函数）：
var xmlhttp;
//封装Ajax请求方法，实现多个请求发送
function loadXMLDoc(url,retFunc) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else {
// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=retFunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
//Ajax请求，不同URL，不同回调函数
function ajaxRequest() {
loadXMLDoc("/try/ajax/ajax_info.txt",function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
（3）JQuery封装Ajax写法：
$.ajax({
type:"get", //请求方式(get和post),默认为get，不用设置请求头
url:"test.php", //请求的地址
dataType:"json", //返回格式为json
async:true, // 是否请求异步，默认异步
data:{"id":"3","name":"jquery for ajax"}, //发送请求的数据
success:function(req){ //请求成功回调函数
console.log(req); //请求回调的函数处理
var s = JSON.stringify(req);
$(".xixi").text(s);
},
error:function(error){ //请求失败回调函数
console.log(error.responseText);
}
})（4）JQuery封装Ajax请求的完整写法（含进度方法）：
$.ajax({
url: "http://www.microsoft.com", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: { //参数值
"id": "value"
},
type: "GET", //请求方式
processData: false, //对表单data数据是否进行序列化
contentType: false, //dataType设置你收到服务器数据的格式
xhr: function() { //ajax进度条
var xhr = $.ajaxSettings.xhr();
if (onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", progressBar, false);
return xhr;
}
},
beforeSend: function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
//进度方法
/**
*侦查附件上传情况,这个方法大概0.05-0.1秒执行一次
*/
function progressBar(evt) {
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100 * loaded / tot); //已经上传的百分比
$.fn.progressInit.draw(per + '%'); //绘制经度条
}（5）部分参数的解析：
1）open(method,url,async) ;//规定请求的类型、URL 以及是否异步处理请求。
参数：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
2）send(string) 将请求发送到服务器。
参数： string：仅用于 POST 请求
3）GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
4）onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
1、readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
2、status：状态码
200 一切正常(ok)
304 没有被修改(not modified)
403 禁止访问(forbidden)
404 没找到页面(not found)
500 内部服务器出错(internal service error)
（6）jQuery 使用 JSONP，可以实现跨域请求
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
//返回的是json对象数据
console.log(data);
var a = JSON.stringify(data);
$('.haha').html(a);
});
$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略
jsonp:"callback",//->把传递函数名的那个形参callback，可省略
success:function (data){
console.log(data);}
});（7）JS实现JSONP跨域：
function jsonp({ url, params, callback }) {
return new Promise((resolve, reject) => {
let script = document.createElement('script')
window[callback] = function(data) {
resolve(data)
document.body.removeChild(script)
}
params = { ...params, callback } // wd=b&callback=show
let arrs = []
for (let key in params) {
arrs.push(`${key}=${params[key]}`)
}
script.src = `${url}?${arrs.join('&')}`
document.body.appendChild(script)
})
}
jsonp({
url: 'http://localhost:3000/say',
params: { wd: 'Iloveyou' },
callback: 'show'
}).then(data => {
console.log(data)
})（8）同事写的好像是老版的写法，做个笔记：
function createXHR() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
for (var i = 0, len = versions.length; i < len; i++) {
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
} catch (ex) {
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("NO XHR object available");
}
}
function actionCopy() {
var wxh = "";
var token = "";
var data = "wxh=" + wxh + "&" + "token=" + token;
//_taq.push({convert_id: "1615728011819032", event_type: "other"});
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
location.href = '**跳转地址**';
} else {
alert("Response wa unsuccessful: " + xhr.status);
}
}
};
xhr.open("POST", "**请求地址**", true); //异步请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//post请求增加的
xhr.send(data);
console.log(xhr, token);
}
相互学习~~~~~