描述一次ajax请求,ajax请求

前言

项目中也会用到ajax请求，但是真正对ajax请求一直不太清楚，而且一直以为是另一种语言，真是蠢，后来看到才知道原来只是JavaScript的一种标准的方法，而且之前也用过ajax只不过也差不多已经忘记其核心内容了，平常我们使用的jQuery的$.ajax和$.get(),$.post()这些也只是对原生ajax方法的封装，知其现象也要了解原理，否则只会学的越来越混沌。本片也会以个人理解来写。

为什么要使用ajax

阮一峰是这样描述

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

AJAX 其实就是异步的加载JavaScript和XML的，当请求一个资源的时候，不能一直通过url去请求，这样也是会刷新整个页面的，当使用一个方法，使用这个方法请求到的数据再去渲染页面，这样就不会有刷新的感觉。这是我理解的Ajax，学识才浅。望指正。

原生的JavaScript实现Ajax

目前所有的浏览器实现Ajax请求都是使用的是XMLHtppRequest 这个对象

get

var xmlHttp = new XMLHttpRequest();//使用XMLHttpRequest 先要new一个对象实例出来。

xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);

xmlHttp.send(null);

传递参数直接在?后指定，多个参数用&分隔，和url写参数是一样的

GET请求同一URL时会有缓存，通过参数是否一致来判断

解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()

但是这样只是获取数据，没有对获取到的数据进行处理，所以也就失去了意义

一般使用的都是以下为标准方法

html

javascript

function success(text) {

var textarea = document.getElementById('test-response-text');

textarea.innerHTML= text;

}

function fail(code) {

var textarea = document.getElementById('test-response-text');

textarea.innerHTML= 'Error code: ' + code;

}

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();//创建一个XMLHttpRequest对象

} else {

request = new ActiveXObject('Microsoft.XMLHTTP');// 这个是兼容低版本的IE

}

// var request = new XMLHttpRequest();

request.onreadystatechange = function(){ //状态发生变化时，调用回调函数，最好是写在这个地方

if(request.readyState == 4){ // 成功完成

if(request.status == 200){ // 判断响应结果返回数据

return success(request.responseText)

}else {

return fail(request.status)

}

}else{

// http继续

}

}

request.open('GET', 'https://view.baocloud.cn:7090/json/alarm.json');

request.send();

// POST

html

JavaScript

var xmlhttp = new XMLHttpRequest();

xmlhttp.open("POST","https://view.baocloud.cn:7090/json/alarm.json");

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 设置头部信息

xmlhttp.send("fname=Bill&lname=Gates");

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("test-response-text").innerHTML=xmlhttp.responseText;

}

POST没有缓存

POST发送的数据量大

AJAX无法发送文件

readyState改变时触发onreadystatechange事件，4为完成

status是返回状态，200是成功，404是未找到页面

responseText是返回的数据，为字符串格式