ajax入门

1. 概述

AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载页面。让 Web 更能接近桌面应用的用户体验。

说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现 网络编程。

2.ajax 主要内容

（1） 使用HTML、XHTML以及 CSS来表示和控制页面元素信息。
（2）使用JavaScript操作DOM。
（3）使用XML、XSLT（Extensible Stylesheet Language Transformations）以及JSON进行数据交换及相关操作。
（4）使用XmlHttpRequest对象与Web服务器进行异步数据交换。
（5）使用JavaScript将以上各部分内容绑定在一起。

3.基本原理

当用户与浏览器中的页面进行交互时，会触发页面元素对象的响应事件，客户端捕获相应的事件后，如果需要提交给服务器进行处理，客户端就将要处理的数据（包括状态描述）转换为XML或JSON格式的字符串，再利用异步传送方式将这些数据提交给服务器；服务器进行处理后，同样利用XML或JSON格式和异步传送方式将处理结果返回给客户端；客户端再从返回结果中提取需要的部分，并将提取的部分利用JavaScript对网页进行“悄悄地”局部更新，而不是刷新整个页面。

4.ajax 的优点

（1）页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来的页面状态，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。
（2）把一些由服务器承担的工作转移到客户端处理，这样可以充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担。
（3）使用基于标准化的并被广泛支持的技术，不需要安装插件即可运行。
（4）使Web中的界面与应用分离，也可以说是数据与呈现分离。

5.上手

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
    if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)
    }
}

ajax使用XMLHttpRequest对象异步发送请求，是整个ajax技术中的核心

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

创建XMLHttpRequest 对象：
var xhr=new XMLHttpRequest();

请求API（向服务器发送请求）
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求
说明：async： true(异步)，false(同步)
send(string) 将请求发送到服务器
setRequestHeader() 设置请求头

响应API（接收服务器的响应）
responseText （获取字符串形式的数据）和responseXML（获取XML形式的数据）
status
statusText
getResponseHeader()
getAllResponseHeaders()

onreadystatechange 事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest的状态信息。XMLHttpRequest对象有三个重要属性：
onreadystatechange
readyState
status (200:ok 404:页面未找到)

说明：readyState属性：请求状态
0 （未初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了

6.GET 请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。

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 一般都是业务数据

7.POST 请求

POST 请求过程中，都是采用请求体承载需要提交的数据。

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)
    }
}

8. 同步与异步

同步：一个人在同一个时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等 待 异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待

xhr.open() 方法第三个参数要求传入的是一个 bool值，其作用就是设置此次请求是否采用异步方式执行，默认 为true ，如果需要同步执行可以通过传递false实现：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 这里的代码最后执行
    console.log('request done')
    }
}
console.log('after ajax')

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 这里的代码最后执行
    console.log('request done')
    }
}
xhr.send(null)
console.log('after ajax')

演示同步异步差异。

一定在发送请求 send() 之前注册 readystatechange （不管同步或者异步）

为了让这个事件可以更加可靠（一定触发），一定是先注册
了解同步模式即可，切记不要使用同步模式。 至此，我们已经大致了解了 AJAX 的基本 API 。

9.AJAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。 将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

/**
发送一个 AJAX 请求
@param {String} method 请求方法
@param {String} url 请求地址
@param {Object} params 请求参数
@param {Function} done 请求完成过后需要做的事情（委托/回调）
*/
function ajax (method, url, params, done) {
    // 统一转换为大写便于后续判断
    method = method.toUpperCase()
    // 对象形式的参数转换为 urlencoded 格式
    var pairs = []
    for (var key in params) {
      pairs.push(key + '=' + params[key])
    }
    var querystring = pairs.join('&')
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
    ActiveXObject('Microsoft.XMLHTTP')
    xhr.addEventListener('readystatechange', function () {
        if (this.readyState !== 4) return
          // 尝试通过 JSON 格式解析响应体
        try {
          done(JSON.parse(this.responseText))
        } catch (e) {
          done(this.responseText)
        }
    })
    // 如果是 GET 请求就设置 URL 地址 问号参数
    if (method === 'GET') {
      url += '?' + querystring
    }
    xhr.open(method, url)
    // 如果是 POST 请求就设置请求体
    var data = null
    if (method === 'POST') {
        xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
        data = querystring
    }
    xhr.send(data)
}

ajax('get', './get.php', { id: 123 }, function (data) {
  console.log(data)
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) {
  console.log(data)
})

10. jQuery $.ajax

$.ajax({
	url: './get.php',
	type: 'get',
	dataType: 'json',
	data: { id: 1 },
	beforeSend: function (xhr) {
	console.log('before send')
	},
    success: function (data) {
        console.log(data)
    },
    error: function (err) {
        console.log(err)
    },
    complete: function () {
        console.log('request completed')
    }
})

常用选项参数介绍：
url：请求地址
type：请求方法，默认为 get
dataType：服务端响应数据类型
contentType：请求体内容类型，默认 application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功之后触发（响应状态码 200）
error：请求失败触发
complete：请求完成触发（不管成功与否）

11.跨域

相关概念
同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过 AJAX 的方式请求。 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求 什么是同源？例如：http://www.example.com/detail.html 与一下地址对比:

在测试ajax跨域请求，但是数据一开始是获取不到的，原因是：访问的接口是别人写的接口，返回的数据是不支持跨域请求所需要解析的数据的，在跨域请求接口的时候，接口中返回的数据需要是对象类型的。

 $(document).ready(function () {
        $("#app").on("click", function () {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/userInfo/userList",
                dataType: "jsonp",
                jsonpCallback: "showData",
                success: function (data) {
                    // var result = JSON.parse(data);
                    // $("#text").val(result);
                },
                error: function (a1, a2, a3) {  //请求失败后返回
                    console.log(a1 + "...." + a2 + "...." + a3);
                }
            });
        });
    });

在后端的接口

   @RequestMapping("/userList")
//    @RequiresPermissions("userInfo:view")//权限管理;
    public String userInfo(HttpServletRequest request, HttpServletResponse response) throws IOException {
        UserInfo info = new UserInfo();
        info.setName("李四");
        info.setPassword("111111");
 
        String callback = request.getParameter("callback");
        //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
        String data = "[{'age':123,'name':'1111'}]";
        String data1 = " { 'id': '123', 'courseID' : 'huangt-test', 'title' : '提交作业', 'content' : null  }";
        String quote = JSONParser.quote(data1);
        String result = callback + "(" + quote + ")";
//        response.getWriter().write(result);
        return result;
    }

JSONP
JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。

其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一 段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求

客户端 http://www.zce.me/users-list.html

服务端 http://api.zce.me/users.php?callback=foo 返回的结果

foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])

总结一下：由于XMLHttpRequest无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再来看原理。 问题：

1.JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
2.只能发送 GET 请求

注意：JSONP 用的是 script 标签，更 AJAX 提供的 XMLHttpRequest没有任何关系！！！

jQuery中使用 JSONP 就是将 dataType设置为 jsonp

其他常见的 AJAX 封装 库： Axios