说在前面:
传统方法的缺点:
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
什么是ajax?
ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
一、 原生AJAX
AJAX:“Asynchronous Javascript And XML”(异步Javascript和XML),是指一种创建交互式应用的网页开发技术。
注意:
① AJAX不是新的编程语言,而是一种使用现有标准的新方法
② AJAX最大的有点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
③ AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
1. XMLHttpRequest对象:用于在后台与服务器交换数据。意味着可以在不重新加载整个网页的情况下,对网页某部分进行更新。目前所有浏览器都支持XMLHttpRequest
五步使用XMLHttpRequest:
① 创建XMLHttpRequest对象:var obj = new XMLHttpRequest()
② 使用open方法设置请求方式和地址以及相关交互信息:obj.open(method,url,asyncFlag,user,name,callback)
。其中method
有post/get
两种方法,asyncFlag
为是否异步(默认为true,即默认为异步,若写false,浏览器不会报错,会报警告)。user
和name
有时用来确认身份。callback
可用来接收服务器返回的内容
③ 设置发送的数据,开始和服务器端交互:obj.send(data)
。若为get
方法,则数据在url后面,每个参数用&
连接,且数据和地址之间用?
连接。若为post
方法,数据作为send
方法的参数。
④ 注册事件:onreadystatechange
属性 | 描述 |
---|---|
onreadystatuschange |
存储函数(或函数名),每当readyState 属性改变时,就会调用该函数 |
readyState |
存储XMLHttpRequest 的状态(0-4。0:请求未初始化。1:服务器连接已建立。2:请求已接收 3:请求处理中。4:请求已完成,且相应已就绪 |
status |
200:“ok”。404:未找到页面 |
⑤ 服务器响应:obj.responseText/obj.responseXML
属性 | 描述 |
---|---|
responseText |
获得字符串形式的相应数据 |
responseXML |
获得xml形式的相应数据 |
response |
二、js几种跨域方法和原理
js跨域是指通过js在不同的域之间进行数据传输或通信
浏览器(注意:主体是浏览器)出于安全方面的考虑,只允许与本域(同协议、同域名、同端口)下的数据接口进行交互,不同源的客户端脚本在没有授权的情况下,是不能读写对方资源的。
1. 用XMLHttpRequest实现跨域
在服务器发送回应时,需要添加一个头文件:
response.setHeader("Access-Control-Allow-Origin","http://js.host");
。这个文件头的第一个参数是允许跨域,第二个参数是接受跨域的服务,上述文件头说明了服务器信任来自http://js.host
的请求。
2. 通过jsonp跨域
在页面上引入不同域的js脚本文件是可以的。jsonp正是利用这个特性来实现的。
通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的回调函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
在使用jsonp跨域时必须要在发送请求前定义回调函数,否则找不到回调函数
eg:有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是
http://example.com/data.php
,那么a.html中的代码就可以这样: