Ajax六部曲

举报
hello word~/ 发表于 2020/10/19 16:38:24 2020/10/19
【摘要】 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就是记住六步就行了


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。