关于前端ajax那些事

前言

2005 年 2 月，AJAX 这个词第一次正式提出，AJAX 指异步 JavaScript 及 XML (Asynchronous JavaScript And XML)，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据， 再更新当前网页的对应部分，而不用刷新整个网页。Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请 求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求 并处理响应，而不阻塞用户。

同步和异步

同步指的是当一个进程在执行某个请求的时候，如果这个请求需要等待一段时间才能 返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。
异步指的是当一个进程在执行某个请求的时候，如果这个请求需要等待一段时间才能 返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统 再通知进程进行处理。

创建一个 Ajax 的具体步骤

具体来说，创建 AJAX 包括以下 6 个步骤:

1、创建 XMLHttpRequest 对象，也就是创建一个异步调用对象;
2、创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息;
3、设置响应 HTTP 请求状态变化的函数;
4、发送 HTTP 请求;
5、获取异步调用返回的数据;
6、使用 JavaScript 和 DOM 实现局部刷新。

var xml = new XMLHttpRequest();

xml.open('GET',url,'true');

xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xml.send()

xml.onreadystatechange = function(){
    if(xml.readyState === 4 && xml.status === 200){
        //成功后，处理响应
    }
}

例子中采用了简单的get请求，如果使用post，可以在send中传参，xml.send(data)

Ajax 解决浏览器缓存问题的方法

1 、 在 ajax 发 送 请 求 前 加 上 anyAjaxObj.setRequestHeader(“If-Modified- Since”,”0′′);
2、在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“Cache- Control”,”no-cache”);
3、在 URL 后面加上一个随机数:”fresh=” + Math.random();
4、在 URL 后面加上时间戳:”nowtime=” + new Date().getTime();
5、如果是使用 jQuery，直接这样就可以了$.ajaxSetup({cache:false})。

这样页面的 所有 ajax 都会执行这条语句就是不需要保存缓存记录。