ajax学习笔记
在很早之前,就已经接触过ajax了,包括原生ajax请求方式、跨域ajax请求方法、HTTP的相关知识。这次写ajax主要是对之前学习的知识的一个回顾会总结吧,因为我发现之前好像被我玩的滚瓜烂熟的东西渐渐被我忘记了。我发现这个淡忘很可怕,回顾我之前学的那些知识,发现好多东西都是模模糊糊的有些映像,可是真的要去想又想不起来了,所以我觉得能有个平台,把自己学习的东西记录下来。这样,不管是分享还是回顾,对于一个开发人员来说都是很不错的。 先来说说最基础的吧,ajax其实在很早就已经提出了,具体时间呢,对于一心想着学技术的人来说,我只能说,我也忘了。。。不过时间并不是关键,关键在于为什么要有ajax,要ajax有什么用。ajax的出现最开始是为了解决以前表单难的问题,在没有ajax技术之前,用户如果要填写一个很长的表单,然后他花了半天的时间来填写表单,然后点击了下提交。这时候就把数据发送到了后台,后台经过一系列的验证后,发现你其中一项没有填写,这时候你又要重新检查你填写的表单,然后填写完了之后提交,又花了半天时间后台验证完了之后。发现你填写的电话号码不正确。这样来来回回好几次之后,十有八九用户不是开始骂人了,就是已经果断关闭了你的网页了。这时候,ajax的出现就变得很有必要了,通过ajax,我们可以实现用户每输入完成一条信息,就可以发送一次异步验证,判断用户填写的信息是否符合要求。这样,用户就能很直观的看到填写的数据是否规范,是否漏填了说明数据。 说了ajax的好处之后,就说点实际的内容吧,既然ajax那么好,我们要怎么去使用它呢,首先,我们就要创建一个异步对象 var request=new XMLHttpRequest(); 不过这里有一个问题,就是ie5和ie6是不支持这个对象的,所以我们可以写个兼容性代码 var request;
这样,我们就创建了一个兼容的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及以上的版本。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |