加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ajax学习笔记

发布时间:2020-12-16 03:29:31 所属栏目:百科 来源:网络整理
导读:在很早之前,就已经接触过ajax了,包括原生ajax请求方式、跨域ajax请求方法、HTTP的相关知识。这次写ajax主要是对之前学习的知识的一个回顾会总结吧,因为我发现之前好像被我玩的滚瓜烂熟的东西渐渐被我忘记了。我发现这个淡忘很可怕,回顾我之前学的那些知

  在很早之前,就已经接触过ajax了,包括原生ajax请求方式、跨域ajax请求方法、HTTP的相关知识。这次写ajax主要是对之前学习的知识的一个回顾会总结吧,因为我发现之前好像被我玩的滚瓜烂熟的东西渐渐被我忘记了。我发现这个淡忘很可怕,回顾我之前学的那些知识,发现好多东西都是模模糊糊的有些映像,可是真的要去想又想不起来了,所以我觉得能有个平台,把自己学习的东西记录下来。这样,不管是分享还是回顾,对于一个开发人员来说都是很不错的。

  先来说说最基础的吧,ajax其实在很早就已经提出了,具体时间呢,对于一心想着学技术的人来说,我只能说,我也忘了。。。不过时间并不是关键,关键在于为什么要有ajax,要ajax有什么用。ajax的出现最开始是为了解决以前表单难的问题,在没有ajax技术之前,用户如果要填写一个很长的表单,然后他花了半天的时间来填写表单,然后点击了下提交。这时候就把数据发送到了后台,后台经过一系列的验证后,发现你其中一项没有填写,这时候你又要重新检查你填写的表单,然后填写完了之后提交,又花了半天时间后台验证完了之后。发现你填写的电话号码不正确。这样来来回回好几次之后,十有八九用户不是开始骂人了,就是已经果断关闭了你的网页了。这时候,ajax的出现就变得很有必要了,通过ajax,我们可以实现用户每输入完成一条信息,就可以发送一次异步验证,判断用户填写的信息是否符合要求。这样,用户就能很直观的看到填写的数据是否规范,是否漏填了说明数据。

  说了ajax的好处之后,就说点实际的内容吧,既然ajax那么好,我们要怎么去使用它呢,首先,我们就要创建一个异步对象

var request=new XMLHttpRequest();

  不过这里有一个问题,就是ie5和ie6是不支持这个对象的,所以我们可以写个兼容性代码

var request;
if(window.XMLHttpRequest){ request=new XMLHttpRequest();//兼容IE7及以上 }else{ request=new ActivveXObject("Microsoft.XMLGTTP");//兼容IE5,IE6 }

  这样,我们就创建了一个兼容的ajax对象。创建了ajax对象之后,我们就可以像后台来发送数据了。发送请求要用到一个open方法和send方法,先来说说open方法,open方法用来定义请求的方式(GET或者POST,GET一般用于信息的获取,使用url传递参数,对发送的信息有所限制,最大不超过2000字符。POST一般用于修改服务器上的资源,对发送信息数量理论上来说是无限大的),请求的路径和是否异步,也就是说他接收三个参数,比如:

open('GET','index.php',true);

  第三个参数默认就是true,表示是异步的,所以可以不填。然后就是send,他就接收一个string类型的参数,用来写入要传输的数据,一般来说,如果请求为get,数据都是通过url后跟跟参数的方式传输的,所以如果open中的方法为get的时候,这里的值一般都为空,如果方法为post,那么,数据就可以填在send中。再用post传输数据的时候,一定要记得添加一个请求头,用来告诉服务器这是表单提交。代码如下:

request.setRequestHeader('Content-type','application/x-www-form-urlencoded');

  这样,我们就实现了像后台发送数据,不过,我们要怎么判断服务器是否接收到数据了呢,这时候就要用到一个对象来监听这个请求了

 

request.onreadystatechange=function(){
    if(request.readystate===4&&request.status===200){
        console.log(request.responseText);
    }
}

  这里多了好几个新方法,不过都很简单,首先是onreadystatechange,这个就是我之前说的监听服务器状态的的对象,那监听了之后怎么看服务器是什么状态呢,这时候就要用到函数里面readystate和status两个属性了。readystate一共有五个取值,分别是:

    0:请求初始化,open还未调用

    1:服务器连接已建立,open已调用

    2:请求已接收,接收到请求头信息

    3:请求处理中,接收到了响应主体

    4:请求已完成,响应已就绪

  同样的,status的取值有很多,不过我们最关心的还是他请求成功的状态,也就是status等于200的时候。当readystate等于4,并且status等于200的时候,表示请求完成了,这时候,我们就要可以对响应的数据进行一些操作了。这里操作的方法有很多,比如

    responseText:获得字符串形式的响应数据

    responseXML:以数字和文本形式返回HTTP状态码

    status和statusText:以数字和文本的形式返回HTTP状态码

    getAllResponseHeader():获取所有的响应报头

    getResponseHeader():查询响应中某个字段的值

  除了原生的方法之外,jquery中也有封装好的ajax请求,这里我就不多提了,有兴趣的话可以查阅jquery关于ajax的文档

  这样子,一个完整的ajax请求就完成了。这里,我还要再拓展两点内容,一个是HTTP协议,另一个是跨域问题,这两个东西在提到ajax的时候总是会随之而来的。

  首先来说说HTTP,到底什么是HTTP,简单来说,HTTP就是一种通过计算机网络进行通信的规则。他是一种无状态协议,可能第一次听这个会感觉有点蒙,不过不用这么在意,因为这只是个拓展的内容,了解他能有助于我们更深入的了解前后端之间的交互,当然,如果不会对于初级程序员来说也不会造成太大的影响,初级程序员能掌握简单的ajax发送请求和接受数据就够了。HTTP请求简单来说分以下七个步骤:

  1.建立TCP链接

    2.web浏览器向web服务器发送请求命令

    3.web浏览器发送请求头信息

    4.web服务器应答

    5.web服务器发送应答头信息

    6.web服务器向浏览器发送数据

    7.web服务器关闭TCP链接

  那HTTP请求又请求了什么数据呢?又或者说,他的请求中包含了什么东西呢?HTTP由四部分组成,分别是

    1.请求的方法和动作,也就是你的method是GET还是POST

    2.请求的地址,也就是数据发送到哪里去

    3.请求头,他包含了一些客户端的信息,包括一些身份验证信息

    4.请求体,包含了客户提交的字符串信息和表单信息

  发送了请求之后,服务端也会给我们一定的响应,这个响应由三部分组成,分别是:

    1.一个数字和文字的状态码,用来显示请求成功或失败

    2.响应头:类似于请求头,包含服务器信息例如服务器的类型,日期和时间,内容类型和长度

    3.响应体:服务端响应的正文

  HTTP的响应的状态码有很多,不过也不出五种类型:

    1XX:信息类,标识web服务器接收到请求,正在进一步处理

    2XX:成功,标识用户请求被正确接收,理解和处理

    3XX:重定向,标识请求没有成功,客户必须采取进一步的动作

    4XX:客户端错误,表示客户端提交的请求有错误

    5XX:服务器错误,表示服务器不能完成对请求的处理

  说完了HTTP协议,再来说说跨域的问题,在平时简单的项目中,可能不会涉及到这个,问题,但是如果项目中有需求需要你去访问不同域的数据的时候,就会出现跨域问题了,那什么叫跨域呢,在了解跨域之前,我们要先了解网址的组成,就拿http://www.abc.com:8080/script/jquery.js这个网址来说,http://是他的协议名,www是子域名,abc.com是主域名,8080是端口号,/script/jquery.js是请求的资源地址。当然我们平时可能看到过www.abc.abc.com的域名,这里www.abc是子域名,abc.com是主域名。在了解了网址的组成之后,再来了解跨域就简单了,跨域就是当协议,子域名,主域名,端口号中的任意一项不同的时候,请求资源就会跨域。那要怎么解决跨域呢?这里有三种解决办法,一种是依靠后台,建立一个代理,然后通过这个代理去访问不同域的资源,这样,就不会造成跨域了。还有一种比较普遍的前端解决办法是使用jsonp,他利用的是script的src属性不收同源策略的原理,通过script标签去访问不同域的资源。首先我们要先在自己的文件中写一个函数,然后在请求回来的资源中写一个函数的调用就可以了。当然我们也可以使用jquery中的方法,只需要在$.ajax参数中加一个jsonp参数并且赋值一个函数名,并且把dataType改成jsonp就好了。不过这里要注意的一点是,jsonp不支持post方法,因为他是通过url来传参数的。

  在HTML5的新特性中,也有了跨域的解决办法,只需要在服务端加两个条件就好了

    header('Access-Control-Allow-Orign:*');

    header('Access-Control-Allow-Methods:POST,GET');

  不过,这个新特性只兼容IE10及以上的版本。

(编辑:李大同)

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

    推荐文章
      热点阅读