ajax

发布时间：2020-12-15 21:41:35 所属栏目：百科来源：网络整理

导读：AJAX的全称是Asynchronous JavaScript And XML. 通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新 XmlHttpRequest使我们可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户UI 一、ajax的优点和缺点优点： 1.页面无刷新

AJAX的全称是Asynchronous JavaScript And XML.
通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新
XmlHttpRequest使我们可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户UI

一、ajax的优点和缺点

优点：
1.页面无刷新，用户的体验非常好
2.ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担,
减少不必要的数据往返，减少了带宽占用
3.基于标准化的并被广泛支持的技术，兼容性好

缺点：
1.ajax不支持浏览器back按钮
2.ajax暴露了与服务器交互的细节

3.对搜索引擎的支持比较弱

二、ajax请求总共有多少种callback

一共是八种：

onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

三、XMLHttpRequest对象的兼容性

IE：
new ActiveXObject("Microsoft.XMLHTTP");

标准浏览器：
new XMLHttpRequest();

四、XMLHttpRequest对象的常用方法和属性

open("method","url")建立对服务器的调用

send()方法，发送具体请求，get请求对应null

abort()方法，停止当前请求

readyState属性
0,1,2,3,4

responseText 属性服务器的响应，表示为一个文本

responseXML 属性服务器的响应，表示为XML

status 服务器的HTTP状态码
200对应ok

400对应not found

五、readyState状态值说明

0：请求未初始化（not init）
1：服务器连接已建立【对应open()方法】（connection）
2：服务器已接收请求【对应send()方法】（has received）
3：请求处理中前端处于waiting状态，服务器正在处理数据（waiting）
4：请求已完成，且响应已就绪（already）

六、ajax过程原生js代码

function createXmlHttp(){
	var xmlHttp = null;

	if(window.ActiveXObject){//IE浏览器
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}

	return xmlHttp;
}

function readyStateChange(xmlHttp){
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			console.log(xmlHttp.responseText);
		}else{
			console.log("fail");
		}
	}
}

function doGet(url){
	var xmlHttp = createXmlHttp();
	xmlHttp.open("GET",url,true);//这里的true表示 异步传输
	xmlHttp.send(null);
	readyStateChange(xmlHttp);
}

function doPost(url,data){
	var xmlHttp = createXmlHttp();
	xmlHttp.open("POST",true);//这里的true表示 异步传输
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlHttp.send(data);
	readyStateChange(xmlHttp);
}

doGet('ajax.json');

七、jquery中ajax的使用方法

$.ajax({
	type: "POST",url: "getInfo.php",data: {name: "rgy"},dataType: "json",timeout: 10000,success: function(data) {
		console.log(data);
	},error: function() {
		console.log("fail");
	}
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!