js进阶课程ajax简介（ajax是浏览器来实现的）

一、总结

1、ajax使用需要服务器支持，比如phpstudy

2、ajax是浏览器支持的功能：ajax有个核心对象XMLHttpRequest，这个对象时浏览器提供支持的，是浏览器windows对象的一个对象，window.XMLHttpRequest

3、ajax兼容性问题：大部分浏览器都支持ajax，IE6不支持ajax的XMLHttpRequest对象，但是支持ajax的ActiveXObject对象

二、js进阶课程ajax简介

准备工作

配置本地服务器环境，这里推荐安装：phpstudy，优点：一次性安装，无须配置即可使用，非常方便

Ajax 简介

什么是 Ajax ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

Ajax 的基本用法

创建 XMLHttpRequest 对象
语法：var myAjax=new XMLHttpRequest();
老版本的 IE（IE5 和 IE6）使用 ActiveX 对象：
var myAjax=new ActiveXObject("Microsoft.XMLHTTP");
向服务器发送请求:使用open() 和 send() 方法：
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
  1. method：请求的类型；GET 或 POST
  2. url：文件在服务器上的位置
  3. sync：true（异步）或 false（同步）
- send(string):string：仅用于 POST 请求
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText 属性:responseText 属性返回字符串形式的响应
- responseXML 属性:如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
- XMLHttpRequest 对象的三个重要的属性：
  1. onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  2. readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    1. 0: 请求未初始化
    2. 1: 服务器连接已建立
    3. 2: 请求已接收
    4. 3: 请求处理中
    5. 4: 请求已完成，且响应已就绪
  3. status:200: "OK"/404: 未找到页面

三、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax01</title>
 6     <script src="ajax.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="btn" value="测试按钮">
10     <script>
11     var btn=document.getElementById('btn')
12     btn.onclick=function (){
13         //1.创建Ajax对象
14         var myajax=new XMLHttpRequest()
15         alert(myajax) //IE6及其以下版本不支持
16         /*
17         if (window.XMLHttpRequest){ //1、XMLHttpRequest对象时浏览器的window对象下的一个对象
18             var myajax=new XMLHttpRequest() //2、ajax向下兼容IE5和IE6的方法：选择结构
19         }else{
20             var myajax=new ActiveXObject("Microsoft.XMLHTTP"); //3、ajax向下兼容IE5和IE6的方法：ActiveXObject对象
21         }
22         */
23     }
24     </script>
25 </body>
26 </html>