首页 > 代码库 > Ajax与jsonp

Ajax与jsonp

1、ajax的概念

  AJAX = Asynchronous Javascript And XML

     (AJAX  =  异步  javascript  和 xml)

  AJAX是一种无需重新加载整个网页的情况下,能更新部分网页的技术。

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