传统的网页如果要加载新内容,需要重新加载整个页面。这会对网络流量产生过多负荷,用户体验感也随之下降。而使用Ajax技术则可以在不加载新页面的情况下获取刷新数据。
XMLHttpRequest
Ajax无需页面刷新即可进行数据的交互,是基于浏览器内置的XMLHttpRequest对象来实现的。使用XMLHttpRequest进行数据的交互可分为“创建XMLHttpRequest对象”、“发起请求”、“获取响应”的步骤。
创建XMLHttpRequest对象
var request; if(window.XMLHttprquest){ //firefox,Mozila浏览器 request = new XMLHttpRequest(); }else{ //兼容IE浏览器 request = new ActiveXObject("Microsoft.XMLHTTP"); }
发起请求
//绑定readyState属性变化响应事件 request.onreadystatechange = responseFunction(); //建立Http请求 request.open("GET","/test.php",true); //发送请求 send(null);
取得响应
function responseFunction(){ if(request.readyState==4 && request.status==200){ //处理代码 } }
XMLHttpRequest对象方法:
方法 | 描述 |
---|---|
open(methon,url,asynch,usename,password) | 建立HTTP请求,method是请求方法(post,get),url是请求资源地址,asynch表示是否采取异步方式(true,false),username、password指定用户名和密码 |
abort() | 强制退出某一请求 |
getAllResponseHeader() | 返回HTTP响应头信息 |
getResponseHeader(header) | 返回HTTP响应头某个头部信息的值 |
send(content) | 项服务器发生请求 |
setRequestHeader(Header,value) | 设置HTTP请求的头部信息 |
XMLHttpRequest属性:
属性 | 描述 |
---|---|
readyState | 请求状态描述(0:请求未初始化、1:建立连接、2:请求接收、3:请求处理、4:完成) |
responseText | 服务器响应的数据(字符串类型) |
responseXML | 服务器响应的数据(XML类型) |
status | 服务器响应状态 |
status | 服务器响应状态的文本内容 |
onreadystatechange | readyState状态发生改变时,XMLHttpRequest会自动调用onreadystatechange 指定的javascript函数 |
JSON
Json是javascript对象表示法,是一种存储和交换文本信息的语法,采用键值对的方式组织。且作为一种存储语法,不同语言上都可以使用这种方式,只要按照Json格式解析数据即可。Javascript解析Json有两种方式:
eval
var jsonObj = eval( '(' +jsonData + ')');
parse
var jsonObj = JSON.parse(jsonData);
注意 采用eval方法解析json数据时,json字符串中的js代码会执行,存在着安全隐患。因此推荐使用JSON.parse方法。
jQuery中使用Ajax
jQuery中封装着一个Ajax方法,可以直接进行异步数据传输。
$.ajax([settings])
settings参数通常由多个键值对组成,常用的有:
键 | 值 |
---|---|
url | 规定发送请求的URL默认是当前页面 |
type | 规定请求的类型(GET 或 POST) |
data | 规定要发送到服务器的数据 |
dataType | 预期的服务器响应的数据类型 |
error(xhr,status,error) | 如果请求失败要运行的函数 |
success(result,status,xhr) | 当请求成功时运行的函数 |
Ajax跨域
一个URL通常由 协议+域名+主域名+端口号+请求资源地址 组成。在一个页面里对另一个页面发起请求,如果协议、域名、主域名、端口号其中任意一个不同,则被称为跨域,两个页面就在不同的域中。Js出于对安全的考虑,采用同源策略,不允许跨域调用其它页面。然而在开发中,经常出现跨域的情况,解决跨域变成了一个很常见的问题。
解决跨域的办法:
代理
要使页面a跨域访问页面b,可以在页面a的环境中搭建一个Web站点(代理),该站点可以向页面b发送HTTP请求,接收响应,并将页面a加入到该站点中。这样页面a对页面b的请求,都发送到这个代理,然后由代理负责转发和接收响应。
jsonp
<script scr="http://test.com/example.php"> </script>
XHR2
在后端需要访问的页面中添加header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET");