Ajax与jsonp

一、ajax的概念

　　AJAX = Asynchronous Javascript And XML

　　　　　(AJAX  =  异步  javascript  和 xml)

　　AJAX是一种无需从新加载整个网页的状况下，能更新部分网页的技术。

二、工做原理

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

　　B、传统的网页(不适用ajax)若是须要更新内容，必须从新加载整个网页。

三、关于同步与异步

　　同步须要等待返回结果才能继续，异步没必要等待，通常须要监听异步的结果。

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

　　例如：

　　　　添加购物车问题。采起同步方式，每加入一项购物车，则须要等待页面从新加载后再执行其余操做。

　　　　而使用异步方式，则只需监听，无需等待便可执行其余操做。相对而言，异步加载优点更大，ajax优点因而可知。

四、建立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：请求已接收

　　　　三、请求处理中

　　　　四、请求已完成

　　status等于200：“OK”  

　　　　   等于404：未找到页面

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

五、XMLHttpRequest对象的重要性

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

　　　　responseText或responXML属性

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

　　　　responseText得到XML形式的响应数据

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

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

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

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

七、关于跨域

　　跨域能够简单的理解为从一个域名访问另外一个域名，处于安全考虑，浏览器不容许这么作;

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

八、ajax跨域

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

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

九、jsonp跨域

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