Ajax六部曲
我个人对于Ajax的理解给予了一定的总结:(分原Ajax,还有一个就是jQuery里面的Ajax了,jQuery里面的Ajax可能简单一点,因为那个库已经是封装好了你需要的Ajax)
1:浏览器
2:Ajax对象
3:Ajax.open(method,url,true) {发送请求,看是否异步或同步}
4:Ajax.send()
5:onreadystatechage:监听
6:statu==200 {可能有这几种结果:403 503 404普遍404}
下面我举个我个人觉得通用的公式列子:
function ajaxFun(callback){
var xhr=null;
if(window.xmlHttpRequest){
xhr=new HMLHttpRequest();
}else{
xhr =new ActiveXObject('Microsoft.XMLHttp');
}
xhr.open("GET","路径",true);
}
xhr.send();//这个可以说是发送也可以是说完结关闭,避免不使用了,浏览器还在运行耗性能
然后下面我来写一个状态改变的事件触发器通用公式:
xhr.onreadystatuchange(){
if(xhr.readystatu==4){
if(xhr.status==200){
JSON.Parse(xhr.responseText)
//这个上一行就是讲将里面的字符串转换尾json格式数组,不过也可以换一种简单写法也是通用的:看下面黄色的我写的:
xhr,onreadystatuchange=function(){
if(xhr.readystate==4){
if(xhr.status==200){
callback(xhr.responseText);
}
}
}
}
}
//然后这是可以写一个获得数据的一个方法
就是function show(date){
...........
}
}
下面就是jQuery的Ajax!!!
$.ajax({
type:"GET" ,
url:"https://xxxx"
dataTYpe:"jsonp" ,
jsonp:"xx"
callback:'xx'
})
function(){
console.log('xxx')}
当然也有简单得,就是直接有三步就是一个类型,一个路径,一个函数,这个前提是在不存在跨域问题的时候操作
翻译:
第一步写Ajax的类型,看是GET还是post
第二部写地址,就是写你想获取的数据的地址
第三步写数据类型,比如说你获取的数据类型是一系列字符串,然后你需要的是把这让人看不懂的字符串转变为看得懂的文字,那就是用jsonp,就是需要加数据类型为jsonp,
第四步:数据,简单来说就是数据地址里面域名后面的后面的显示,比如像百度地址上面有部分就是wd=xxx,淘宝的好像就是q=xx,就是页面的内容相关的关键字,我举个列子,我搜索的是百度页面的英雄联盟,然后地址那个部分就显示的就是wd=LOL,就是后面接你想要的内容的关键字,
第五步就是回调,其实回调就是等于回调函数名,基本都是每个地址的末尾部分显示的一串字符串
第六步:写回调函数的接收是否成功还是失败,就是callback,就是你去获取网站的数据的时候,需要打印还是干其他的事,你这个时候都需要写回调这个数据的函数,当然多写一步获取失败的回调函数也行,
有没有发现这个和普通的Ajax很想,上次我发表的读书笔记和这次有着共同特点,就是都是六部,其实两者都是通用的,Ajax就是记住六步就行了
- 点赞
- 收藏
- 关注作者
评论(0)