Ajax（一）

什么是Ajax？（拍黑板，敲重点！）

　　AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX快速入门

1.1 AJAX概述

　　AJAX:  asynchronous  javascript  and  xml (异步javascript和xml)。

　　AJAX并不是一种新技术，而是已有技术的集合。JavaScript是核心载体。

　　AJAX优势：在不刷新页面的情况下，更新页面数据，提升用户体验。

　　AJAX就像一个小秘书，能够实现异步工作。

　　

1.2 AJAX核心对象---XMLHttpRequest对象

　　历史：1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp直到2005年Ajax才开始流行使用，该年google公司发布了一个邮箱产品gmail，内部的gtalk聊天工具有使用ajax技术，该事情引起人们对ajax的注意，并促成其被广泛使用，同时使得向来不被人们重视的javascript语言得到的大家的青睐。

 

 　　创建XMLHTTPRequest对象：分为IE浏览器（IE7之前）和非IE浏览器（chrome、firefox、opare、safair、搜狗等，包括IE7+之后）。

 

　　IE:    var xhr = new ActiveXObject('Msxml2.XMLHTTP');

　　非IE:  var xhr = new XMLHttpRequest();

 　　编写函数实例化 XMLHttpRequest对象，兼容ie和非ie

　　xhr/xhr.html

　　

　　

 

 　　1.3 AJAX核心熟悉---readyState（区分大小写）

　　AJAX的整个过程有五个状态，对应readyState的五个值：0-4

　　0：已经创建AJAX对象了

　　1：已经调用open方法了

　　2：已经调用send方法了

　　4：服务器数据返回完毕，AJAX请求完毕

1.4 Ajax核心方法

　　1)   open: 准备ajax请求

  　　   xhr.open(var1, var2, var3);

    　　 var1：请求方式 post   get

     　　var2：请求的后台程序的地址

     　　var3：请求方式  异步(true 默认)/同步(false)  可选

 

     2) send: 发送ajax请求

     xhr.send(var);

     var：有两种情况

          如果是get方式，var=null即可

          如果是post方式

 

1.6 其他重要属性和事件

　　1) responseText: 以字符串形式接收服务器端返回的数据

　　2) responseXML: 以xml格式接收服务器端返回的数据

　　3) onreadystatechange事件: readyState的值每次发生变化都会触发该事件。

　　0-->1    1-->2   2-->3  3-->4 总共触发4次

1.7 简单案例

　　目标: 在index.html页面中设置一个按钮，点击按钮时获取后台index.php文件返回的数据

　　Ajax四步流程:

　　1） 实例化XMLHttpRequest对象

　　2） 准备ajax请求  --- 调用 open方法

　　3） 发送ajax请求  --- 调用 send方法

　　4） 调用onreadystatechange事件，检测readyState=4时，接收后台程序的返回值

　　index.html文件

 　　通过按钮的点击事件发送ajax请求，并接收到后台程序的返回结果

　　

　　index.php