ajax

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", url, 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");
	}
});



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值