封装ajax函数（不可跨域）

Posted 2020-11-09 zhuzixi

一、主体：封装ajax函数：ajaxFunc

function ajaxFunc(method, url, data, callback, flag) {
//(1)创建ajax对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHttp‘);
}
//(2)请求方式get||post
method = method.toUpperCase();
if(method == ‘GET‘){
xhr.open(method, url, flag);
xhr.send();
}else if(method == ‘POST‘){
xhr.open(method, url, flag);
xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(data);
}
//(3)监听请求数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
callback(xhr.responseText);
}
xhr = null;
}
}
}
//(4)回调函数对数据处理
function callback(requestData){
var obj = JSON.parse(requestData);
}

 

二、次要

1.ajax全称：asynchronous javascript and xml

2.ajax特点：局部获取数据，且不用刷新页面（比如地图）；受同源策略的限制，只能获取同源的资源，除非不同源的服务器某资源的内部进行配置，允许该页面访问。

3.请求方式：get、post、put、delete；

4.get、post的区别：

（1）提交方式：

get：请求的数据在URL之后，用？分隔URL和数据，用&连接多个参数，数据是英文或数字会原样发送，如果是空格转换为+，如

果是中文或其他字符用base64加密，得到16进制的ASCII码值；

post：把提交的数据放在HTTP的包体中

（2）传输数据大小：

首先，HTTP协议没有对传输数据大小进行限制，也没有对URL长度进行限制，但是不同的浏览器和服务器对URL的长度进行了限制（大约都在2K多一点的字节），因此

get的数据请求受到了限制

post虽然不受URL的限制，但是各个服务器会规定对post提交的数据大小进行限制，不过post请求的数据要比get大

（3）安全性：

由于数据提交方式的不同，get请求要更加不安全

（4）post不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则；soap是http post的一个专用版本，遵循一种特殊的xml格式，Content-type设置为

text/xml，任何数据都可以xml化。

5.ajax的请求过程：

6.readystatechange事件——监听资源加载状态

支持该事件（readystatechange）的每一个对象都有一个readyState属性

该属性（readyState）包括5个状态值：

0：未初始化

1：调用了send方法，正在请求资源

2：请求资源完成

3：交互中，解析响应的内容

4：完成

不是所有的对象都会经历readyState属性的每一个状态值的变化，有的对象会直接跳过某些状态

7.服务器响应的状态码：

200：成功请求资源

300：请求的资源位置发生变化

400：服务器拒绝、找不到、不允许 该URL的请求

500：服务器内部问题