Ajax

1.XMLHttpRequest对象

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari  
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
}

2.HTTP请求和响应

   HTTP请求完整过程：

  1. 建立TCP连接
  2. 浏览器向Web服务器发送请求命令
  3. 浏览器发送请求头信息
  4. Web服务器应答
  5. Web服务器发送应答头信息
  6. Web服务器向浏览器发送数据
  7. Web服务器关闭TCP连接

  HTTP请求的组成：

请求的方法或动作（GET或POST）、请求的URL、请求头（客户端环境和验证信息等）、请求体（请求正文）

  HTTP响应的组成：

状态码（数字和文字组成）、响应头（服务器类型、日期时间、内容类型和长度等）、响应体

  状态码（首字母定义了类型）：

1xx:信息类、2xx:成功（200 OK）、3xx:重定向(304)、4xx客户端错误（404 NOT FOUND）、5xx:服务器错误（500）

 

   XMLHttpRequest发送请求：

  • open(method,url,async)     //async默认值是true，即异步传输
  • send(string)
xhr.open("GET","search.php",true);
xhr.send();
xhr.open("POST","create.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=小明&sex=男");

  XMLHttpRequest取得响应：

  • responseText属性：获取字符串形式的响应数据
  • responseXML属性：获取XML形式的响应数据
  • status属性和statusHeader()：HTTP状态码
  • getAllResponseHeader()：获取所有的响应报头
  • getResponseHeader()：查询响应中的某个字段的值
  • readyState属性：0：请求未初始化、1：服务器连接已建立，open已调用、2：请求已接收，接收到头信息、3：请求处理中，接收到响应主体、4：请求已完成
xhr.onreadystatechange = function(){
    if( xhr.readyState==4&&xhr.status===200 ){
        //xhr.requestText
    }
}

实例：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo</title>
    <style>
        body, input, select, button, h1 {
            font-size: 28px;
            line-height:1.7;
        }
    </style>    
</head>

<body>

    <h1>员工查询</h1>

    <label>请输入员工编号：</label>
    <input type="text" id="keyword" />
    <button id="search">查询</button>
    <p id="searchResult"></p>

    <h1>员工新建</h1>
    <label>请输入员工姓名：</label>
    <input type="text" id="staffName" /><br>
    <label>请输入员工编号：</label>
    <input type="text" id="staffNumber" /><br>
    <label>请选择员工性别：</label>
    <select id="staffSex">
        <option>女</option>
        <option>男</option>
    </select><br>
    <label>请输入员工职位：</label>
    <input type="text" id="staffJob" /><br>
    <button id="save">保存</button>
    <p id="createResult"></p>

    <script>
        document.getElementById("search").onclick = function() { 
            var request = new XMLHttpRequest();
            request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
            request.send();
            request.onreadystatechange = function() {
                if (request.readyState===4) {
                    if (request.status===200) { 
                        document.getElementById("searchResult").innerHTML = request.responseText;
                    } else {
                        alert("发生错误：" + request.status);
                    }
                } 
            }
        }

        document.getElementById("save").onclick = function() { 
            var request = new XMLHttpRequest();
            request.open("POST", "server.php");
            var data = "name=" + document.getElementById("staffName").value 
                              + "&number=" + document.getElementById("staffNumber").value 
                              + "&sex=" + document.getElementById("staffSex").value 
                              + "&job=" + document.getElementById("staffJob").value;
            request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            request.send(data);
            request.onreadystatechange = function() {
                if (request.readyState===4) {
                    if (request.status===200) { 
                        document.getElementById("createResult").innerHTML = request.responseText;
                    } else {
                        alert("发生错误：" + request.status);
                    }
                } 
            }
        }
    </script>
</body>
</html>
View Code

 

3.JSON

数据格式：“名称”：“值对”

数值得类型：数字(整型和浮点数)、字符串（双引号）、逻辑值（true或false）、数组（[]）、对象({})、null

JSON解析：

  • eval 危险，特别是执行第三方json数据时尽可能使用JSON.parse()方法
  • JSON.parse 可捕捉JSON中的语法错误
var jsondata = '{"staff":[{"name":"一","age":"60"},{"name":"二","age":"40"},{"name":"三","age":"30"}]}';
var jsonobj = eval('('+jsondata+')');
var jsonobj = JSON.parse(jsondata);
//jsonobj.staff[0].name

检查json语法错误的网站：jsonlint.com

4.jquery实现ajax

jQuery.ajax([settings])

  • type:类型，"POST"、"GET"
  • url:发送请求的地址
  • data:一个对象，连同请求发送到服务器的数据
  • dataType:预期服务器返回的数据类型，例如"json"、"jsonp"，可不指定
  • success:请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
  • error:请求失败时调用，传入XMLHttpRequest对象
$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",     
            url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                if (data.success) { 
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
    
    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",     
            url: "serverjson.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
});

 

5.跨域

 一个域名地址组成： http://   www  .  abc.com  :  8080  /  scripts/jquery.js

                            协议     子域名     主域名      端口号      请求资源地址

当协议、子域名、主域名、端口号中任意一个不相同时，都算不同域。不同域之间相互请求资源就叫跨域。

JavaScript出于安全的考虑，不允许跨域调用其他页面的对象，即受JavaScript的同源策略的限制。

 

处理跨域的方法：

  1. 代理：通过在同域名的web服务器端创建一个代理。比如在北京的服务器后台（www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器（www.shanghai.com/seivice.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
  2. JSONP：Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。JSONP非正式传输协议，允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };

    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
</script>
    //服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：
flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});
    <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });
     })
</script>
    jQuery实现
  3. XHR2：HTML5提供的XMLHttpRequest Level2已实现了跨域访问以及一些其他新功能。(CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求) 在服务端做一些小小的改造：
    • header('Access-Control-Allow-Origin:*');
    • header('Access-Control-Allow-Methods:POST,GET');

设置的header为“*”，任意一个请求过来之后服务端我们都可以进行处理&响应。

cors在移动终端支持的不错，可以考虑在移动端全面尝试；PC上有不兼容和没有完美支持，所以小心踩坑。jsonp是get形式，承载的信息量有限，所以信息量较大时cors是不二选择。

 

参考：慕课网-Ajax全接触http://www.imooc.com/learn/250

        AJAX POST&跨域 解决方案 - CORS http://www.cnblogs.com/Darren_code/p/cors.html

        说说JSON和JSONP,也许你会豁然开朗 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

         

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dxchen/p/5723931.html