分享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的实例教程的详细内容，更多请关注其它相关文章！