首页 > 程序开发 > web前端 > JavaScript >

原生js实现Ajax、jQuery实现Ajax、跨域Ajax

2017-11-13

原生js实现Ajax、jQuery实现Ajax、跨域Ajax。传统的网页如果要加载新内容,需要重新加载整个页面。这会对网络流量产生过多负荷,用户体验感也随之下降。而使用Ajax技术则可以在不加载新页面的情况下获取刷新数据。

传统的网页如果要加载新内容,需要重新加载整个页面。这会对网络流量产生过多负荷,用户体验感也随之下降。而使用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");
相关文章
最新文章
热点推荐