前言
项目中也会用到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
<div id = " test-response-text"></div>
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
<div id = " test-response-text"></div>
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是返回的数据，为字符串格式
网友评论