ajax

ajax

1.基本操作

1.1readyState

console.log(xhr.readyState)

0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法。

1 OPENED open() 方法已经被调用，建立了连接。

2 HEADERS_RECEIVED send() 方法已经被调用，并且已经可以获取状态行和响应头。

3 LOADING 响应体下载中， responseText 属性可能已经包含部分数据。

4 DONE 响应体下载完成，可以直接使用 responseText 。

2.具体用法

2.1get方法

var xhr = new XMLHttpRequest()
    // GET 请求传递参数通常使用的是问号传参
    // 这里可以在请求地址后面加上参数，从而传递数据到服务端
    xhr.open('GET', './delete.php?id=1')
    // 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
    xhr.send(null)
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            console.log(this.responseText)
        }
    }
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

2.2post方法

    var xhr = new XMLHttpRequest()
    // open 方法的第一个参数的作用就是设置请求的 method
    xhr.open('POST', './add.php')
    // 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
    // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
    xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
    // 需要提交到服务端的数据可以通过 send 方法的参数传递
    // 格式：key1=value1&key2=value2
    xhr.send('key1=value1&key2=value2')
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            console.log(this.responseText)
        }
    }
	//要注意的是设置请求头必须是在open（）之后

3jQuery中的ajax方法

3.1ajax方法

    $.ajax({
        url: './get.php',//请求路径
        type: 'get',//请求类型
        dataType: 'json',//请求数据格式
        data: {
            id: 1//上传参数
        },
        beforeSend: function (xhr) {//send（）之前触发的函数
            console.log('before send')
        },
        success: function (data) {//请求成功的函数
            console.log(data)
        },
        error: function (err) {//请求失败的函数
            console.log(err)
        },
        complete: function () {//请求完成触发（不管成功与否）
            console.log('request completed')
        }
    })

3.2 $.get

GET 请求快捷方法

3.3 $.post

POST 请求快捷方法

3.4 $.load

$(selector).load()

4 跨域

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完
全相同，只有同源的地址才可以相互通过AJAX或者js 的方式请求（但HTML、css不影响）

4.1解决方案

1）后端设置响应头

在后台设置响应头，允许跨域

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问–>允许所有的语言对我这个语言发起请求
如果你想指定一个具体的语言的话, 把 * 换成 请求过来的协议+主机名+端口号

header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

2）利用jsonp技术

使用jsonp实现跨域请求
利用script标签中src属性, 设置请求的地址, 因为src是HTML标签不受同源策略的约束

<script src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

或者使用jQuery封装好的ajax函数

5ajax特点

异步加载，局部刷新。

同步: 一次一个, 前一个没有执行完成, 后一个不能开始

异步: 一次一堆, 前一个没有执行完成, 后一个也能开始