Ajax基础笔记(适合初学者)

Ajax 前端技术

前端技术: 在浏览器中执行的程序都是前端, html, css, js等等.
后端技术: 在服务器中执行的程序, 使用 java 语言开发的后端程序, servlet.jsp, jdbc.mysql, tomcat 等等.

1. 全局刷新和局部刷新

1. 全局刷新: 使用 form, href 等发起的请求是全局刷新.
   用户发起请求, 视图改变了, 跳转视角, 使用新的数据局添加到页面.
   缺点:

   1. 传递数据量比较大, 占用网络的带宽;
   2. 浏览器需要重新的渲染整个页面;
   3. 用户的体验不是那么好.

2. 局部刷新: 在当前页面中, 发起请求, 获取数据, 更新当前页面的 dom 对象, 对视图部分刷新.
   特点:

   1. 数量比较小, 在网络中传输速度快;
   2. 更新一个页面内容, 是部分更新页面, 浏览器不用全部渲染视图;
   3. 在一个页面中, 可以做多个局部刷新;
   4. 从服务器获取的输数据, 拿到更新视图.

2. 异步请求对象

在局部刷新中, 使用异步请求对象, 在浏览器内部发起请求, 获取数据.
异步对象是在浏览器内部的一种 javascript 对象. 各大浏览器都能支持异步对象的使用. (Chrome, Firefox, Opera…)
异步对象 XMLHttpRequest

3. 异步对象 XMLHttpRequest 介绍

js 中的一种对象, 使用 js 语法创建和使用这个对象.

var xhr = new XMLHttpRequest();

之后就可以使用 xhr 对象是的属性或者函数, 进行异步对象的操作.

使用异步对象实现局部刷新, 异步对象主要负责发起请求, 传递请求的参数, 并从服务器接收数据.

局部刷新需要使用的那些技术:
1). javascript: 创建 XMLHttpRequest 对象, 调用它的属性或者方法;
2). dom: 处理 DOM, 更新 select 的数据;
3). css: 处理视图, 更新, 美化;
4). servlet: 服务端技术;
5). 数据格式: json. (它之前是 XML)
把上面这些技术的综合使用叫做 ajax(阿贾克斯).

4. Ajax

AJAX = Asynchronous JavaScript and XML (异步的 JavaScript 和 XML).
AJAX 是一种在无需重新加载整个网页的情况下, 能够更新部分网页内容的新方法.

AJAX 不是新的编程语言, 它是多种几乎的综合使用, 包含了 javascript, dom, css, 服务端技术, servlet, jsp, jdbc 等等, 还有 json 数据格式.

使用 AJAX 实现局部刷新.

Ajax 核心是 javascript 和 xml (json): 使用 javascript 操作异步对象 XMLHttpRequest, 和服务器交互使用 json 数据格式.

5. 异步对象 XMLHttpRequest 属性和方法

1. 创建异步对象, 使用 js 的语法

   var xhr  = new XMLHttpRequest();
   

2. XMLHttpRequest 方法

   ① open(请求方式, 服务器端的访问地址, 异步还是同步);
   例如:

   xhr.open("get", "loginServlet", true);
   

   ② send(); 使用异步对象发送请求

3. XMLHttpRequest 属性

   readyState 属性:

   ​ 0: 表示创建异步对象时, new XMLRequest();

   ​ 1: 表示初始异步对象的请求参数, 执行 open() 方法;

   ​ 2: 使用 send() 方法发送请求;

   ​ 3: 使用异步对象从服务器接收了数据;

   ​ 4: 异步对象接收了数据, 并在异步对象内部处理完成后.

   status 属性: 网络的状态, 和 Http 的状态码对应

   ​ 200: 请求成功;

   ​ 404: 服务器资源没有找到;

   ​ 500: 服务器内部代码有错误.

   responseText 属性: 表示服务器端返回的数据

   例如:

   var data = xhr.responseText;
   

6. 异步对象 XMLHttpRequest 使用步骤

1. 使用 js 创建异步对象

var xhr = new XMLHttpRequest();

2. 给异步对象绑定事件吗事件名称: onreadystatechange
   例如: button 增加单击事件 onclick

<input type="button" onclick="btnClick()" />

<script  type="text/javascript">
	function btnClick() {
    	// 按钮单击的处理代码
	}    
    
    // xhr 绑定事件	
	xhr.onreadystatechange = function() {
    	// 当事件发生时执行的代码
	}
</script>

​ 在绑定事件中做什么, 根据 readyState 值做请求的处理

xhr.readystatechange = function () {
    if(xhr.readyState == 4) {
        // 从服务器获取了数据, 更新当前页面的 DOM 对象, 完成请求的处理
        var data = xhr.responseText;
        // 更新 DOM 对象
        document.getElementById("#mydiv").innerHtml = data;
    }
}

3. 初始请求的参数, 执行 open() 函数

xhr.open("get", "loginServlet", true);

4. 发送请求, 执行 send()

xhr.send();

7. 同步请求和异步请求

看 open(请求方式, 访问 url 地址, boolean 是不是异步的)
true: 异步请求;
false: 同步请求.

8. 扩展

使用方法

​ 使用 ajax 的过程可以类比平常我们访问网页的过程

// 1. 创建一个 XMLHttpRequest 类型的对象 --- 相当于打开了一个浏览器
var xhr = new XMLHttpRequset();
// 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);
    }
}

FormData

以前 AJAX 只能提交字符串, 现在可以提交二进制的数据.

处理响应数据渲染

​ 模板引擎: artTemplate
​ 模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML 中。

兼容方案

​ XMLHttpRequest 在老版本浏览器(IE5/6)中有兼容问题, 可以通过另外一种方式代替.

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

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. 跨域

相关概念:
同源策略是浏览器的一种安全策略, 所谓同源是指域名, 协议, 端口完全相同, 只有同源的地址才可以相互通过 AJAX 的方式请求.

同源或者不同源说的是两个地址之间的关系, 不同源地址之间请求我们称之为跨域请求.

解决方案:

JSON with Padding, 是一种借助于 script 标签发送跨域请求的技巧.
其原理就是在客户端借助 script 标签请求服务端的一个动态网页, 服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本, 将原本需要返回给客户端的数据传递出去.
以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求.

注意: JSONP 用的是 script 标签, 与 AJAX 提供的 XMLHttpRequest 没有任何关系!!!

CORS: Cross Origin Resource Share, 跨域资源共享

// 允许远端访问
header('Access-Control-Allow-Origin: *');

这种方案无需客户端做出任何变化(客户端不用改代码), 只是在被请求的服务端相应的时候添加一个 Access-Control-Allow-Origin 的响应头, 表示这个资源是否允许指定域请求.