Ajax
定义:Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。
现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 。
Ajax的工作原理
AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。
用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
AJAX的缺陷
AJAX大量使用了JavaScript和AJAX引擎,而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。
AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
对流媒体的支持没有FLASH好。
一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
<script type="text/javascript"> var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); //支持IE7+、firFox、谷歌浏览器等 }else{ request = new ActiveXObject("Microsoft.XMLHTTP"); //低版本支持这个对象 } </script>
Http请求响应过程
1) 建立连接:客户端与服务器建立TCP连接
2) 发送请求:打开一个连接后,客户端把请求信息发送到服务器的相应端口上,完成请求动作提交。
3) 发送响应:服务器在处理完客户端请求之后,要向客户端发送响应消息。
4) 关闭连接:客户端和服务器端都可以关闭套接字来结束TCP/IP对话。
注意:发送的信息一般在2000个字符
HTTP状态码
1XX:表示请求正在进行
2XX:成功,请求接收 如:200(**Ajax用到)
3XX:重定向,需要进一步的操作
4XX:客户端的错误,表示请求有关,如:404
Found:请求中引用的文档不存在
5XX:服务器错误,表示服务器不能正确的处理:如;500
XMLHttpRequest方法:
语法:
open(method,url,saync);//method=POST/GET,url=请求地址,async=异步(true)还是同步(false)【一般情况下,默认是异步,我们用ajxa肯定要用异步才行,所以默认即可】
send(String);//发送参数,get方法中一般在url中,post中一般在这个方法中。
例子(ajax的两个请求方法):
1.首先肯定是要创建XMLHtttpRequest的对象,根据浏览器的版本而定。
function createXHR(){ var xhr=null; if(window.ActiveXObject){ xhr= new ActiveXObject("microsoft.xmlhttp"); }else{ xhr = new XMLHttpRequest(); } return xhr; }
2.get请求方式:
reuqest.open("GET","a.php?name=lj",true); send();
reuqest.open("POST","a.php",true); request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //setRequestHeader写在中间,不然报错.采用post方法的时候加这个,告诉浏览器这是一个post请求 request.send("name=王二狗&sex=男");
XMLHttpRequest取得响应:
reponseText:得到字符串
reponseXML:得到xml文档数据
status和statusText:以数字或文本形式返回HTTP状态码//在监听中要用
getAllReponseHeader():获取所有的响应报头
getReponseHeader():查询响应中的某个字段的值
readyState属性:监听响应通知
值为:
0:请求未初始化,open未调用
1:服务器已建立链接,open已调用
2:请求接收,收到头信息
3:请求进行处理,接收到响应主体
4:请求已完成,切响应已就绪,响应完成
既然HTTP状态码和readyState响应属性我们都知道了,怎么监听?
request.onreadystatechange = function(){ if(request.readyState===4&&request.status===200){ alert(reuqest.reponseText); } }
例子:
post方法就是在中间加一个告知浏览器,我是post方法的请求报头设置.
Jquery封装ajax的方法
JSON(JavaScript对象表示法):存储和文本信息系的语法,Java Script Object Notation
**json是一种独立语言,不管什么编程语言都可以解析json数据。
优点:json的长度比xml格式小,读写速度更快,可以使用javascript內建的方法进行解析,转换成javascript对象。
json数据格式:名称/值对 如:“name":"小鹏"
json值类型:int,float,string,boolean,Array(方括号中),Object(花括号中)
jaon数据格式eg1:
{
"staff":[
{"name":"红旗","age":70},
{"name":"郭靖","age":35},
{"name":"黄蓉","age":21},
]
}
想知道这个json数据是否正确,到json数据验证网站去验证一下吧:点击验证链接
结果:
那Jquery怎么解析Ajax呢?Json数据又是如何进行解析呢?
事实上Jquery已经对传统的Ajax方法进行封装了,所以我只要使用简便的方法即可
json数据的解析方法:
eval()和JSON.parse()方法
在代码中,使用eval()是很危险的,特别是它使用第三方的Json数据的时候(其中有恶意代码),尽可能使用JSON.parse方法来解析,该方法可以捕捉JSON种的错误信息.
下面例子就会出现eval()方法不能通过:
Jquery实现Ajax的语法格式:
Jquery实现Ajax的例子:
GET方法:
POST方法:
补充知识点儿:
跨域
域名地址的组成:
协议+子域名+主域名+端口号+请求资源地址
**JavaScript出去安全方面的kaolve,不允许蛞蝓调用其他页面的对象。
还有子域名、端口号不同,协议不同进行调度都是跨域.
处理跨域的三种方法:
1.直接利用后端调用跨域服务器得到,主要是通过后端的处理跨域得到数据后响应到前端。
2.利用JSONP
3.利用XHR2处理跨域的问题