JavaScript-AJAX

2020-07-23 本文已影响0人 zhulichao

http://www.w3school.com.cn/jquery/ajax_ajax.asp

AJAX(Asynchronous JavaScript and XML)，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。编写常规的AJAX代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同，不过jQuery为我们解决了这个难题。

jQuery AJAX 使用

$.ajax([settings]) 返回其创建的 XMLHttpRequest 对象，大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项以获得更多的灵活性。参数对象settings可选，参数中的所有的选项都可以通过$.ajaxSetup() 函数来全局设置。

global: Boolean 默认为true，表示触发全局AJAX事件
options: Object 可选，AJAX请求设置
async: Boolean 默认为true，表示异步请求
cache: Boolean 默认为true，dataType为script和jsonp时默认为false，false表示不缓存此页面
ifModified: Boolean 默认为false，true表示仅在服务器数据改变时获取新数据
timeout: Number 设置请求超时时间（毫秒），此设置将覆盖全局设置
traditional: Boolean 如果想要用传统的方式来序列化数据，那么就设置为true
processData: Boolean 默认为true，true表示通过data选项传递进来的数据会被转化成一个查询字符串
context: Object 设置AJAX相关回调函数的上下文，也就是回调函数内的this，如果不设定那么this指向调用本次AJAX请求时传递的options参数
username: String 用于响应 HTTP 访问认证请求的用户名
password: String 用于响应 HTTP 访问认证请求的密码
contentType: String 默认为"application/x-www-form-urlencoded"，表示发送信息至服务器时内容编码类型
dataType: String 预期服务器返回的数据类型，如不指定jQuery将自动根据HTTP包MIME信息来智能判断，可用值："xml"、"html"、"script"、"json"、"jsonp"、"text"
type: String 默认为GET，可选"POST"或"GET"
headers: Object 设置请求头
url: String 发送请求的地址，默认为当前页地址
data: String 发送到服务器的数据、请求参数，将自动转换为请求字符串格式，processData 选项可禁止此自动转换，GET请求中将附加在URL后
jsonp: String 在一个jsonp请求中重写回调函数的名字，来替代在"callback"
jsonpCallback: String 为jsonp请求指定一个回调函数名，将用来取代jQuery自动生成的随机函数名。想让浏览器缓存GET请求的时候，指定这个回调函数名
scriptCharset: String 只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
xhr: Function 需要返回一个 XMLHttpRequest 对象，默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。
beforeSend: Function(XMLHttpRequest) 发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP头。参数为XMLHttpRequest。如果返回false可以取消本次ajax请求
complete: Function(XMLHttpRequest, TS) 请求完成后回调函数(请求成功或失败之后均调用)，参数为XMLHttpRequest 对象和一个描述请求类型的字符串
error: Function(XMLHttpRequest, textStatus, errorThrown) 请求失败时调用此函数，参数为XMLHttpRequest对象、错误信息、捕获的异常对象
success: Function(responseData, TS) 请求成功后的回调函数，参数为根据dataType参数进行处理后的数据和描述状态的字符串。
dataFilter: Function(data, type) 给Ajax返回的原始数据的进行预处理的函数，data是返回的原始数据，type是dataType参数

示例如下：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("#b01").click(function(){
        // 同步
        htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
        $("#myDiv").html(htmlobj.responseText);
        // 异步
        $.ajax({
            url: "/jquery/test1.txt",
            success: function(responseData) {
                $("#myDiv").html(responseData);
            }
        });
      });
    });
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>

AJAX实现

function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);
    var xhr;

    //创建 - 第一步
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if(window.ActiveObject) {//IE6及以下
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
        xhr.open("GET", options.url + "?" + params, true);
        xhr.send(null);
    } else if (options.type == "POST") {
        xhr.open("POST", options.url, true);
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300 || status == 304) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.error && options.error(status);
            }
        }
    }
}

//格式化参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".", ""));
    return arr.join("&");
}

GET跨域提交表单

前台代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>跨域</title>
        <script src="./jquery.min.js"></script>
        <script>
        function flightHandler(data) {
            console.log('2: ',data)
        }
        window.onload = function() {
            $.ajax({
                url: "http://localhost:9432",
                type: "get", // jsonp必须是get方式，post不支持，注意
                dataType: "jsonp",
                jsonp: "callback", // 回调函数名称变量名
                jsonpCallback: "flightHandler", // 回调函数名称的值
                data: {param: '参数'},
                beforeSend: function () {
                    console.log('1');
                },
                success: function (msg) {
                    console.log('3: ',msg);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log('4: ',XMLHttpRequest, textStatus, errorThrown);
                }
            });
        };
        </script>
    </head>
    <body>
    </body>
</html>

后台代码：

var http = require('http'),
    fs = require('fs'),
    url=require("url");

http.createServer(function(req, res) {
    var query = url.parse(req.url, true).query;
    var func = query.callback;
    console.log(query);
    var msg = `${func}({"txt": "success"})`;
    res.write(msg);
    res.end();  
}).listen(9432);

运行结果为：

1
2:  {txt: "success"}
3:  {txt: "success"}

POST跨域提交表单

CORS（跨域资源共享，Cross-Origin Resource Sharing），定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Origin: http://www.test2.com");

CORS提供了一种跨域请求方案，但没有为安全访问提供足够的保障机制，如果需要信息的绝对安全，不要依赖CORS当中的权限制度，应当使用更多其它的措施来保障，比如OAuth2。CORS使用场景：

CORS在移动终端支持的不错，可以考虑在移动端全面尝试
jsonp是get形式，承载的信息量有限，所以信息量较大时CORS是不二选择
配合新的JSAPI(fileapi、xhr2等)一起使用，实现强大的新体验功能