ajax异步 —— javascript

目录

• ajax是什么

• 原生ajax

• jquery ajax

• ajax跨域

ajax是什么

作用：不必重新加载整个页面，更新部分页面内容。

大概使用过程：通过后台提供的数据接口，ajax获取数据，动态修改视图层。

原生ajax

将ajax请求封装成一个函数，可以传参，选择请求类型，以及成功后的回调函数。

/*
    url: 请求地址,
    data: 请求参数,
    method: 请求类型,
    success: 请求成功后的回调函数
*/
function ajax_method(url, data, method, success){
    var ajax;
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari
        ajax = new new XMLHttpRequest();
    }else {
        // IE6, IE5
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    if (method == "get") {
        if (data) {
            // 有数据
            url += ("?"+data);
        }
        ajax.open(method, url);
        ajax.send();
    }else{
        // post
        ajax.open(method, url);
        // post请求要加上的请求头
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if (data) {
            ajax.send(data);
        }else{
            ajax.send();
        }
    }
 
    ajax.onreadystatechange = function(){
        console.log("可以1");
        // 0: 请求未初始化
        // 1: 服务器连接已建立
        // 2: 请求已接收
        // 3: 请求处理中
        // 4: 请求已完成，且响应已就绪
 
        // 200: 请求处理成功
        // 404: 未找到页面
        if (ajax.readyState == 4 && ajax.status == 200) {
            console.log("请求成功");
            success(ajax.responseText);
        }else{
            console.log("请求失败");
        }
    }
}

调用：

ajax_method("./test.php", {"param1": "val1"}, "post", function(data){
    console("请求拿到的数据:",data);
    // 之后将拿到的数据渲染视图层
})

jquery ajax

使用jqury，可以便捷的发送ajax请求，需要引入juery.js

$.ajax({
    url: "./test.php",
    method: "post",
    dataType: "json",    // 服务器返回数据类型
    data: {
        "param1": "val1",        // 请求参数
    },
    success: function(data){
        console("请求拿到的数据:",data);
        // 之后将拿到的数据渲染视图层
    },
    error: function(){
        alert('请求失败');
    }
});

ajax跨域

为什么有跨域问题？

“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”

同源：相同协议，域名，端口号。

所以当ajax请求的地址，存在协议，域名，端口号不同时，则存在跨域问题，浏览器会报错。

解决跨域的方法，可以看下一篇文章。

jsonp —— javascript