AJAX从入门到放弃

AJAX简单介绍

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术;AJAX = 异步 Javascript和XML;通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页某部分进行刷新;传统网页(不使用AJAX)如果需要更新内容,必须重新加载整个网页。

AJAX的使用

  1. 创建对象

XMLHttpRequest 对象是 AJAX 的基础;所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

为了兼容各个浏览器,我们应该先检查是否支持XMLHttpRequest,如果支持则创建;否则则创建ActiveXObject

//创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置回调函数
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert(xmlhttp.responseText);
    }
}

XMLHttpRequest 常用属性方法

属性

  • onreadystatechange : 设置请求状态监听
  • responseText : 响应的文本
  • responseXML : 响应的XML
  • status : 服务器返回的状态码 success == 200
  • readyState : 请求状态码
readyState 描述
0 对象已建立,但是尚未初始化(未调用open方法);
1 对象已建立,尚未调用send方法
2 send方法已调用,等待响应
3 已接收部分数据,因为响应头不全,这是通过responseBody和responseText获取数据可能会出现错误
4 数据接收完毕

方法

  • open(string method,string url,boolean async):设置请求方式(get,post);以及请求的地址;是否为异步请求(默认)
  • send({String|ArrayBuffer|Blob|Document|FormData} [data]):发送请求时提交数据(一般为post请求)
  • setRequestHeader(key,value):设置请求头

发送GET请求

 //open 设置请求方式和路径
xmlhttp.open("get", "/helloAjax?value=123456")

xmlhttp.send();

发送POST请求

这里需要注意的是 POST发送表单数据,需要指定请求头。

application/x-www-form-urlencoded

xmlhttp.open("post", "/helloAjax");
        //设置请求头
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded")
xmlhttp.send("name=" + name);

最后

由于原生AJAX存在很多浏览器兼容性问题,就从上面创建XMLHttpRequest对象来说就比较麻烦,不过我们选择一些库来代替他(封装的比较好,不用我们考虑兼容性问题了);例如JQuery的AJAX。

你可能感兴趣的:(AJAX从入门到放弃)