AJAX基础

内容：

1.什么是AJAX

2.如何使用AJAX

3.将AJAX封装成函数

4.AJAX其他封装

5.AJAX同步与异步

6.jQuery中Ajax方法的使用

 

 

 

1.什么是AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

AJAX = Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求

AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

 

 

2.如何使用AJAX

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

// GET
// 1.创建 AJAX 对象
var r = new XMLHttpRequest()
// 2.连接 - 设置请求方法和请求地址
r.open('GET', '/login', true)
// 3.发送请求
r.send()
// 4.接受响应
r.onreadystatechange = function() {
    console.log('state change: ', r)
}


// POST
// 1.创建 AJAX 对象
var r = new XMLHttpRequest()
// 2.连接 - 设置请求方法和请求地址
r.open('POST', '/login', true)
// 3.设置发送的数据的格式
r.setRequestHeader('Content-Type', 'application/json')
// 4.发送请求
var account = {
    username: 'gua',
    password: '123',
}
var data = JSON.stringify(account)
r.send(data)
// 5.接受响应
r.onreadystatechange = function() {
    if (r.readyState === 4) {
        console.log('state change: ', r, r.status, r.response)
        // 转换格式
        var response = JSON.parse(r.response)
        console.log('response', response)
    } else {
        console.log('change')
    }
}

 

当然我们也可以把上述过程封装一下：

var ajax = function(method, path, data, responseCallback) {
    // method是请求方法(GET or POST) path是请求路径 
    // data是发送的数据(对象类型) responseCallback是响应函数


}

注意：

• method是请求方法，一般是GET or POST
• path是请求路径，一般不能跨域请求
• data是发送到服务端的数据，是字符串或列表格式
• responseCallback是回调函数，此回调函数将在服务器响应后调用，一般给此回调函数传入服务器响应数据，然后回调函数中的代码实际上是前端操作页面(增删改查)的代码

 

 

3.将AJAX封装成函数

/*
 ajax 函数
*/
var ajax = function(method, path, data, reseponseCallback) {
    var r = new XMLHttpRequest();
    // 设置请求方法和请求地址
    r.open(method, path, true);
    // 设置发送的数据的格式为 application/json
    // 这个不是必须的
    r.setRequestHeader('Content-Type', 'application/json');
    // 注册响应函数
    r.onreadystatechange = function() {
        if(r.readyState === 4) {
            // r.response 存的就是服务器发过来的放在 HTTP BODY 中的数据
            reseponseCallback(r.response);
        }
    };
    // 把数据转换为 json 格式字符串
    data = JSON.stringify(data);
    // 发送请求
    r.send(data);
};

 

 

4.AJAX其他封装

AJAX其他封装方法如下：

// AJAX的GET方法 
var ajaxGet = function(url, callback) {
    /*
        实现 ajaxGet 函数, 用 GET 方法请求一个 URL
        url 是一个 URL
        callback 是一个函数, 在接受服务器响应后调用并传递参数给它
    */
    var r = new XMLHttpRequest()
    r.open('GET', url, true)
    // 设置发送的数据的格式为 application/json (API要求就要设置 不要求就不用设置)
    r.setRequestHeader('Content-Type', 'application/json');
    r.onreadystatechange = function(event) {
        if(r.readyState === 4) {
            // r.response是服务端响应的数据
            callback(r.response)
        }
    }
    r.send()
}


// AJAX的POST方法 
var ajaxPost = function(url, data, callback) {
    /*
        实现 ajaxPost 函数, 用 POST 方法向一个 URL 提交数据
        url 是一个 URL  data 是提交到服务器的数据
        callback 是一个函数, 在接受服务器响应后调用并传递参数给它
    */
    var r = new XMLHttpRequest()
    r.open('GET', url, true) 
    // 设置发送的数据的格式为 application/json (API要求就要设置 不要求就不用设置)
    r.setRequestHeader('Content-Type', 'application/json');
    r.onreadystatechange = function(event) {
        if(r.readyState === 4) {
            // r.response是服务端响应的数据
            callback(r.response)
        }
    }
    // 把数据转换为 json 格式字符串 -> 字典转换成字符串
    data = JSON.stringify(data)
    r.send(data)
}


// AJAX参数全部封装成一个request对象
var ajax = function(request) {
    /*
    request 是一个 object, 有如下属性
        method, 请求的方法, string
        url, 请求的路径, string
        data, 请求发送的数据, 如果是 GET 方法则没这个值, string
        callback, 响应回调, function
        contentType , 提交数据的类型, API要求就要指定
    */
    var r = new XMLHttpRequest()
    r.open(request.method, request.url, true)
    if (request.contentType !== undefined) {
        r.setRequestHeader('Content-Type', request.contentType)
    }
    r.onreadystatechange = function(event) {
        if(r.readyState === 4) {
            request.callback(r.response)
        }
    }
    if (request.method === 'GET') {
        r.send()
    } else {
        r.send(request.data)
    }
}

// ajax函数的使用实例
var account = {
    'username': 'xiaogua',
    password: '123'
}
var data = JSON.stringify(account)
var r = {
    method: 'POST',
    url: '/login',
    contentType:  'application/json',
    data: data,
    callback: function(response) {
        console.log('响应', response)
        var res = JSON.parse(response)
        if (res.success) {
            window.location.href = '/'
        } else {
            alert('登录失败')
        }
    }
}
ajax(r)

 

 

5.AJAX同步与异步

AJAX同步与异步：上述open方法的第三个参数为true或false，true表示使用异步请求，而false表示使用同步请求，一般AJAX都使用异步请求也就是说AJAX的open方法第三个参数一般设置为true！

关于同步与异步：

• 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式
• 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

同步请求:  客户端请求(等待)->服务端处理->响应->页面载入（缺少对象:XMLhttpRequest） 这时候如果有错误，只能再次发送请求，再次等待

异步请求：比如当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的

使用异步请求页面上的操作和服务器端的操作互相之间不会造成阻塞

 

面试题 - 建立一个异步请求的过程：

1. new一个XHR对象
2. 调用open方法
3. send一些数据
4. 对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情比如说向页面中插入元素(提示信息、成功信息等)

 

 

6.jQuery中Ajax方法的使用

使用之前引用jQuery，然后写下以下代码即可：

$.ajax({
    type : "post",  // 向后台请求的方式，有post，get两种方法 不写默认为get
    url : "xxx",    // url填写的是请求的路径
    cache : false,  // 缓存是否打开
    data : {  
        "name" : "xxx",
        "age" : 22
    },  // 请求的数据
    dataType : 'json',  // 请求的数据类型
    success : function(data) {  // 请求的返回成功的方法
        xxx
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
            alert("失败了"+errorThrown)
        }
});