ajax和jsonp

1.原生ajax请求服务端txt文件 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- <script src="myajax.js"></script> -->
 6         <script>
 7         window.onload= function(){
 8             var oBtn = document.getElementById("btn");
 9             oBtn.onclick = function(){
10                 //创建ajax对象
11                 var xhr = null;
12                 if(window.XMLHttpRequest)
13                 {
14                     xhr = new XMLHttpRequest();// w3c标准
15                 }
16                 else
17                 {
18                     xhr = new ActiveXObject("Microsoft.XMLHTTP");// IE
19                 }
20                 // 连接服务器
21                 xhr.open('Get','ha.txt',true);
22                 // 发送请求
23                 xhr.send();
24                 // 接收返回
25                 xhr.onreadystatechange = function(){ //onreadyStateChange事件是在readyState属性值发生改变时触发的
26                     if(xhr.readyState == 4){ // readyState的值表示了当前请求的状态
27                         if(xhr.status == 200){// Status存储了服务器端返回的Http请求响应代码
28                             alert(xhr.responseText);
29                         }
30                         else{
31                             alert('failed');
32                         }
33                     }
34                 }
35             }
36         }
37         </script>
38     </head>
39     <body>
40     <input id="btn" type="button" value="read" />
41     </body>
42 </html>
View Code
属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"

404: 未找到页面

2.jsonp

  • 什么是JSONP？

要了解JSONP，不得不提一下JSON，那么什么是JSON ？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

  • JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

  • 如何使用JSONP？

在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

  • JSONP的简单实例

　　html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
            function jsonpCallback(data) {
                for(var i in data) {
                    alert(i+":"+data[i]);//循环输出
                }
            }
        var JSONP=document.createElement("script");
        JSONP.src="service.php?callback=jsonpCallback";
        document.getElementsByTagName("head")[0].appendChild(JSONP);
        </script>
    </head>
    <body>
    </body>
</html>
View Code

　　php代码

<?php

    header('Content-Type:application/json;charset=utf-8');
    //服务端返回JSON数据
    $arr=array('a'=>1,'b'=>2,'c'=>3);
    $result=json_encode($arr);
    //动态执行回调函数
    $callback=$_GET['callback'];
    echo $callback."($result)";

?>
View Code
  • JSONP的原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

参考文档：http://justcoding.iteye.com/blog/1366102

 

posted @ 2017-05-07 20:51  老Fe同学  阅读(221)  评论(0)  编辑  收藏  举报