Ajax基础

[NextBoy]

ajax

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

创建对象

var xhr = new XMLHttpRequest()

// IE6, IE5 浏览器执行代码
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

打开请求

语法: open(method,url,async)

xhr.open("GET","ajax.txt",true);

规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

发送请求

语法:send(string)

xml.send(null);

将请求发送到服务器。
string：仅用于 POST 请求

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

• responseText 获取字符串形式的响应数据
• responseXML 获得XML形式的响应数据

onreadystatechange事件

readyState 属性存有 XMLHttpRequest 的状态信息。
每当 readyState 改变时，就会触发 onreadystatechange 事件。

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

同源策略

• 相同协议
• 相同地址
• 相同端口

CORS 跨域资源共享

Access-Control-Allow-Origin

JSONP

优点

• 实现跨域请求
• 兼容性更好
• 通过callback的方式回传结果,控制权在调用方这一边

缺点

• 只支持GET请求
• 调用失败不会返回任何状态码
• 安全性问题。如果提供jsonp的服务器被人攻击,js被人控制,那所有调用此jsonp的
  网站都会存在漏洞

function jsonp(url,data,callback){
    //生成一个唯一的函数名
    var functionName = randomFunctionName();
    //初始化参数,如果不带参数,只data为空对象
    var data = data || {};
    //讲唯一的函数放入参数对象中
    data.callback = functionName;
    //将参数拼接入url
    url = parseURL(url,data);
    //将回调函数封装进唯一的函数中
    window[funcName] = function (response) {
        // 这里可以看情况处理，比如如果是 json格式的我们可以 parse 一下
        // data = JSON.parse(response)
        callback(response)
      }
    //插入script脚本
    insertScript();
}

//产生随机函数名
function randomFunctionName() {
}


//序列化参数
function parseURL(url,data) {
}

//插入script
function insertScript(){
    var script = document.createElement('script');
    script.setAttribute('src',url);
    
    document.body.appendChild(script);
}