Ajax学习笔记(一)

时间:2019-08-20
本文章向大家介绍Ajax学习笔记(一),主要包括Ajax学习笔记(一)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

看那些前端招聘简章中我们多多少少能看到一个身影——ajax,他成为了前端工作者必备的一项技能要求。那什么是Ajax呢?

Ajax 全称是 asynchronous javascript and xml(asynchronous=异步),并不是新的编程语言,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,在不需要重新加载整个网页的情况下,实现页面的局部刷新,从而创建快速动态网页的技术。

Ajax创建过程

1.创建XMLHttpRequest对象,即创建一个异步调用对象;

var xmlhttp=new XMLHttpRequest();//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
var xmlhttp=new  ActiveXObject("Microsoft.XMLHttp");//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

//兼容性写法
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.创建一个新的HTTP请求,并指定其请求的方法(GET与POST)、URL及验证信息

xmlhttp.open("method","URL",async);

/*
method:请求类型;GET或POST;
URL:文件在服务器上的位置;
async:true(异步)或false(同步);

*/

3.设置响应HTTP请求状态变化的函数

xmlhttp.responseText;//获得字符串形式的响应数据
xmlhttp.responseXML;//获得XML形式的响应数据

4.发送HTTP请求

xmlhttp.send();
//send(string):将请求发送到服务器。string仅用于post请求

5.获取异步调用返回的数据

//数据是否成功请求,通过onreadystatechange事件来判定,当readyState改变时触发函数
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
/*
readyState:
0:请求未初始化
1.服务器连接已建立
2:请求已接受
3:请求处理中
4:请求已完成,且响应已就绪
Status:
200:ok;
404:"未找到页面"
*/
 

原文地址:https://www.cnblogs.com/smile-xin/p/11380774.html