原生ajax和jQuery中的ajax使用

Ajax是一种能够向服务器请求额外的数据而不需刷新页面，会带来更好的用户体验。

Ajax技术的核心是XMLHttpRequest对象。IE7及现在浏览器中，使用原生XHR创建：

var xhr = new XMLHttpRequest();

ajax请求有两种，同步请求和异步请求，在open()中第三个参数设置是否异步(true代表该次请求异步，false代表同步)同步请求时，代码必须等待请求响应返回才能继续执行下面的代码

var xhr = new XMLHttpRequest();
xhr.open('get', 'example.php', false);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
    alert(xhr.responseText);
}else{
    alert('Resquest was unsuccessful:' + xhr.status);
}

实际我们常用的是异步请求，这时我们通过检查XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段

0： 还没有调用open()方法

1：调用open()方法，但没有调用send()

2：调用send()方法，没有收到响应

3：已经收到部分响应

4：收到全部响应数据，可以在浏览器端使用

通过onreadystatechange事件来监听变化，我们主要监听变化到4这个阶段

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
            if ((xhr.status > 200 && xhr.status < 300) || xhr.status === 304) {
                // deal with xhr.responseText
                alert(xhr.responseText);
            } else {
                alert('Request was unsuccessful' + xhr.status);
            }
    }
}
xhr.open('get', 'example.php', true);
xhr.send(null);

注意，监听事件要写在open()之前

Ajax请求有两种，get和post

get请求属于查询请求，格式是在URL末尾添加名=值&名=值，且名称和值都必须经过encodeURIComponent()编码

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
            if ((xhr.status > 200 && xhr.status < 300) || xhr.status === 304) {
                // deal with xhr.responseText
                alert(xhr.responseText);
            } else {
                alert('Request was unsuccessful' + xhr.status);
            }
    }
}
var url = 'example.php';
var name = encodeURIComponent('name');
var value = encodeURIComponent('tom');
url = url + '?' + name + '=' + value
xhr.open('get', url, true);
xhr.send(null);

使用get方式发给example.php一个请求，带上了name = tom。由于一般服务器会对URL的长度做限制，减少处理URL的压力，所以对get请求发送的数据会有大小限制

post请求属于发送请求，请求的主体是数据，所以可以发送很多数据，且格式不限。

post请求最初是为了处理XML DOM文档，也可以发送字符串

贴一个post请求模拟web表单提交

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
            if ((xhr.status > 200 && xhr.status < 300) || xhr.status === 304) {
                // deal with xhr.responseText
                alert(xhr.responseText);
            } else {
                alert('Request was unsuccessful' + xhr.status);
            }
    }
}
xhr.open('post', 'example.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var form = document.getElementById('user-info');
xhr.send(serialize(form));

function serialize(form){
            var parts = [];
            for(let i = 0;i < form.elements.length;i++){
                var field = form.elements[i];
                switch(field.type){
                    case 'select-one':
                    case 'select-multiple':
                    if(field.name.length){
                        for(let j = 0;j < field.options.length;j++){
                            option = field.options[j];
                            if(option.selected){
                                var optValue = '';
                                if(option.hasAttribute){
                                    optValue = (option.hasAttribute('value')? option.value:option.text)
                                }else{
                                    optValue = (option.attributes['value'].specified?option.value:option.text);
                                }
                                parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optValue));
                            }
                        }
                    }
                    break;
                    case undefined:
                    case 'file':
                    case 'submit':
                    case 'reset':
                    case 'button':
                    break;
                    case 'radio':
                    case 'checkbox':
                    if(!field.checked){
                        break;
                    }
                    default:
                    if(field.name.length){
                        parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value))
                    }
                }
            }
            return parts.join('&');
        }

jQuery中Ajax

jQuery中对Ajax操作进行了封装，$.ajax()方法属于最底层的方法,接收一个对象参数  $.ajax({options})

$.ajax({
    // 请求地址
    url: 'example.php',
    // 请求方式GET或者POST
    type: 'GET', 
    // 发送到服务器的数据
    data: 'name = tom',
    // 是否异步。默认true
    async: true,
    // 期待返回的数据类型
    dataType: 'json',
    // 返回成功时调用,参数data是经过dataType处理过的数据 textStatus描述状态的字符串
    success: function(data，textStatus){
                // some code              
                }
    // 返回失败时调用,参数xhr是XMLHttpRequest对象 textStatus描述状态的字符串
    error: function(xhr,textStatus){
                // some code
                }
})

另外，jQuery提供了表单序列化的接口：serialize()，表单对象调用该接口会返回一串字符串，也就是封装了上面原生js写的serialize()方法。