ajax--2017年1月15日

听说点六下就能复制了？

ajax:

一般处理程序（数据接口）：ashx

跨语言传递数据：
xml：
结构不清晰
代码量比较大
查找起来比较费事
非面向对象结构

json：
结构清晰
代码量相对较小
面向对象的处理解析方式，查找数据很简单

键值对
{"key1":"value","key2":"value"}

多个对象的json
[{"key1":"value","key2":"value"},{"key1":"value","key2":"value"},{"key1":"value","key2":"value"}]

引用jQuery后

        $.ajax({
        url: "ajax/***.ashx",　　url:发送请求的地址。
        data: {"key1":"value","key2":"value"},    data:发送请求的参数名/值对，多个以&符号连接。
        type: "post",　　　　type:发送至服务器的请求方式，主要取值有get和post方式。
        dataType: "json",   dataType:希望服务器返回的数据类型，常用取值text（纯文本）、html（网页代码）、xml（xml文档）、json（json格式字符串）等。
        success: function (data) {        }　　　　 success:服务器作出响应并返回200状态码后调用的函数（回调函数）。此函数可接收多个参数，常用为msg（变量名，可任取）,表示服务器返回的数据。
        });

         $.ajax({
            url: "", //服务器路径
            data: { }, //传递的参数，可为空，可多个
            type: "post", //传递参数的方式，可POST可GET，一般用POST
            dataType: "json", //数据传递的格式，有Json和xml两种
            success: function (data) { //成功返回数据执行这里，排第2

            },
            beforeSend: function () { //一触发ajax就执行，无任何延迟，排第1

            },
            complete: function () { //所有的方法都执行完毕后再来执行这里，排最后（不管成功失败都会执行）

            },
            error: function () { //服务器路径错误，或是服务器内部错误，走这里报错，此位置与success只会走一个

            }
        });

全

ashx文件

         string c = context.Request["code"];
         List<China> ulist = new ChinaData().Select(c);

         string json = "[";

         ;
         foreach (China u in ulist)
         {
             )
             {
                 json += ",";
             }

             json += "{\"AreaCode\":\"" + u.AreaCode + "\",\"AreaName\":\"" + u.AreaName + "\"}";
             count++;
         }

         json += "]";

         context.Response.Write(json);
         context.Response.End();

ASHX文件

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context	为所有 AJAX 相关的回调函数规定 "this" 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。

语法：$.ajax({name:value, name:value, ... }) --- 内有详细参数

原生JS有以上五个参数的$.ajax简单版本

var createAjax = function() {
    var xhr = null;
    try {
        //IE系列浏览器
        xhr = new ActiveXObject("microsoft.xmlhttp");
    } catch (e1) {
        try {
            //非IE浏览器
            xhr = new XMLHttpRequest();
        } catch (e2) {
            window.alert("您的浏览器不支持ajax，请更换！");
        }
    }
    return xhr;
};

首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。

    var ajax = function(conf) {
    // 初始化
    //type参数,可选
    var type = conf.type;
    //url参数，必填
    var url = conf.url;
    //data参数可选，只有在post请求时需要
    var data = conf.data;
    //datatype参数可选
    var dataType = conf.dataType;
    //回调函数可选
    var success = conf.success;

    if (type == null){
        //type参数可选，默认为get
        type = "get";
    }
    if (dataType == null){
        //dataType参数可选，默认为text
        dataType = "text";
    }
    // 创建ajax引擎对象
    var xhr = createAjax();
    // 打开
    xhr.open(type, url, true);
    // 发送
    if (type == "GET" || type == "get") {
        xhr.send(null);
    } else if (type == "POST" || type == "post") {
        xhr.setRequestHeader("content-type",
                    "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if(dataType == "text"||dataType=="TEXT") {
                if (success != null){
                    //普通文本
                    success(xhr.responseText);
                }
            }else if(dataType=="xml"||dataType=="XML") {
                if (success != null){
                    //接收xml文档
                    success(xhr.responseXML);
                }
            }else if(dataType=="json"||dataType=="JSON") {
                if (success != null){
                    //将json字符串转换为js对象
                    success(eval("("+xhr.responseText+")"));
                }
            }
        }
    };
};

核心函数

ajax({
    type:"post",
    url:"test.jsp",
    data:"name=dipoo&info=good",
    dataType:"json",
    success:function(data){
        alert(data.name);
    }
});

此函数的用法

五个参数只有url是必选的；type，dataType具有默认值，并且type的取值只能为post/get或其大写形式，dataType的取值只能为text/xml/json或其大写形式；而当type为get或者已经在url后附带参数则不用指定data；success为回调函数，按需求或写或不写。

.