ajax入门和自己封装ajax

AJAX

1. ajax 是什么？
   AJAX ：现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做ajax 或者是不重新刷新整个页面，只刷新局部页面的一种异步通讯技术
2. ajax技术的核心 XMLHttpRequest对象：发送请求到服务器并获得返回结果

• 常用属性
  • onreadystatechange：指定回调函数
  • readystate: XMLHttpRequest的状态信息
  • status：HTTP的状态码（200对应OK，404对应NotFount等）
  • statusText：HTTP状态码的相应文本（OK或NotFount等）
  • responseText：获得响应的文本内容，表示一个字符串
  • responseXML：获得响应的XML文档对象，可以解析为DOM对象
• 常用方法:
  • open(method,URL,async) 建立与服务器的连接method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false
  • send(content) 发送请求content参数指定请求的参数
  • setRequestHeader(header,value) 设置请求的头信息,把首部设置为所提供的值，在设置首部之前必须先调用open()
  • Onreadystatechange(e)指定回调函数
• 就绪码:
  • 0 XMLHttpRequest对象没有完成初始化
  • 1 XMLHttpRequest对象开始发送请求
  • 2 XMLHttpRequest对象的请求发送完成
  • 3 XMLHttpRequest对象开始读取响应，还没有结束
  • 4 XMLHttpRequest对象读取响应结束
• 就绪码:
  • 200 服务器响应正常
  • 400 无法找到请求的资源
  • 403 没有访问权限
  • 404 访问的资源不存在
  • 500 服务器内部错误

3. 示例

function getXHR() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest;
} else {
// 兼容IE浏览器低版本
new window.AtiveXObject("Microsoft.XMLHTTP");
}
}

var xhr = getXHR(); // 获取 XMLHttpRequest对象

//发送请求
xhr.open('post', '/checkUser.do', true); //建立连接
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 请求头部
xhr.send('username=' + nameElement.value); //发送请求

//接收axja响应
xhr.onreadystatechange = function (e) {
if (e.target.readyState == 4) { // Ajax请求的状态 0, 1, 2, 3, 4:响应完成
if (e.target.status == 200) { // 响应状态码
               alter(e.target.responseText);
} else {
alert(e.target.status + 'e.target.status ' + e);
}
}
}

4. ajax封装

/**
 * {
 *    method:get,
 *    url: '/login.do',
 *    content: 'username=admin&password=123'
 *    success: functon(e){         
 *    }
 * }
 * @param {*} json 
 */

function myajax(json){
    var xhr = getXHR();

    // 2. 打开连接发送请求
    xhr.open(json.method,json.url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 请求头部
    xhr.send(json.content);

    // 3. 处理响应
    xhr.onreadystatechange = function (e) {
        // 根据就绪码判断响应是否完成
        if (e.target.readyState === 4) {
            // 根据状态码判断成功失败
            if (e.target.status === 200) {
                // console.log(e.target.responseText);
                // alert('响应内容是 :' + e.target.responseText);
                json.success(e.target.responseText);
            }
        }
    }
}
function getXHR() {
        if (window.XMLHttpRequest) {
            return new window.XMLHttpRequest;
        } else {
            // 兼容IE浏览器低版本
            new window.AtiveXObject("Microsoft.XMLHTTP");
        }
    }