分享Ajax与jsonp的实例教程

1.ajax

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

2、工作原理

　　A、ajax就是js通过一个网站去加载数据，这个过程通常是用户不可见的。

　　B、传统的网页(不适用ajax)如果需要更新内容，必须重新加载整个网页。

3、关于同步与异步

　　同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果。

　　同步是在一条直线上的队列，异步不在一个队列上，各走各的

　　例如：

　　　　添加购物车问题。采取同步方式，每加入一项购物车，则需要等待页面重新加载后再执行其他操作。

　　　　而使用异步方式，则只需监听，无需等待即可执行其他操作。相对而言，异步加载优势更大，ajax优势由此可见。

4、创建ajax对象(以及兼容)

　(1)创建XMLHttpRequest对象　　

1 if(window.XMLHttpRequest){2     var xhr=new XMLHttpRequest();3 }else{4     var xhr=new ActiveXObject("Microsoft.XMLHTTP");5 };

　(2)打开和服务器的链接

　　　open(method,url,asyn)

　　　参数：

　　　　method：string，请求的类型get或post

　　　　url：string，文件在服务器上的位置

　　　　asyn：Boolean，true(异步)或false（同步）

　　　　　　同步需要等待返回结果才能继续，异步不必等待

　(3)发送给服务器

　　　xhr.send()将请求发送到服务器(get请求)

　　　xhr。send(string) 仅用于post请求

　(4)检测服务器的请求状态

　　　onreadystatechange事件(相应就绪状态)

　　　readyState 和 status属性存有XMLHttpRequest的状态

　　　readyState 改变时就会触发 onreadystatechange 事件

　　　readyState从0到4发生变化

　　　　0：请求未初始化

　　　　1：服务器连接已建立

　　　　2：请求已接收

　　　　3、请求处理中

　　　　4、请求已完成

　　status等于200：“OK”

　　　　 等于404：未找到页面

　　当readyStatus为4并且status为200时，表示相应已就绪。

5、XMLHttpRequest对象的重要性

　　如需获得来自服务器的响应，请使用XMLHttpRequest对象的：

　　　　responseText或responXML属性

　　　　responseText获得字符串形式的响应数据

　　　　responseText获得XML形式的响应数据

　　　　如来自服务器的响应并非XML，用responseText属性reponseText返回字符串形式的响应，可以这样使用：Div.innerHTML = xhr.responseText;

6、关于ajax请求方式get和post的区别：

　　GET：更常用，更方便；性能好；明文发送数据，没有post安全；数传输大小有限制，数据听过URL传递，但是URL有一定的长度限制。、

　　POST：使用相对较少；性能只有get的1/3左右；比get稍微安全一点；没有数据大小限制；

7、关于跨域

　　跨域可以简单的理解为从一个域名访问另一个域名，处于安全考虑，浏览器不允许这么做;

　　　　备注：img、script、iframe等元素的src属性可以直接跨域请求资源。

8、ajax跨域

　　1、可以让服务器去别的网站获取内容返回页面

　　2、给页面的ajax一个url，ajax把这个url传给服务器，由服务器去访问地址。

9、jsonp跨域

　　jsonp就是利用script标签的跨域能力请求资源，显然目的还是json，而且是跨域获取利用js构造一个script标签，把json的url赋给script的src属性，把这个script插入到dom里，让浏览器去获的到，callback({"name":"jack"})，callback是页面存在的回调方法，参数就是得到想得到json回调方法要遵从服务端的月sing一般使用callback或者cb.

以上就是分享Ajax与jsonp的实例教程的详细内容，更多请关注Gxl网其它相关文章！