js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）
一、总结
1、ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法：open()，send()
2、ajax对象XMLHtmlRequest对象的三个重要属性：a、onreadystatechange b、readyState c、status d、responseText e、statusText
3、onreadystatechange判断状态改变属性的使用： myajax.onreadystatechange=function(){}
4、ajax使用四个步骤（详细看下面代码）：
- a、创建XMLHttpRequest对象
- b、open()方法连接服务器
- c、send()方法发送请求给服务器
- d、onreadystatechange属性连接函数以接收responseText属性从服务器返回的数据
二、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 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- sync：true（异步）或 false（同步）
- send(string):string：仅用于 POST 请求
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
- 服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText 属性:responseText 属性返回字符串形式的响应
- responseXML 属性:如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
- onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。
- XMLHttpRequest 对象的三个重要的属性：
- onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
- readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
- status:200: "OK"/404: 未找到页面
- XMLHttpRequest 对象的三个重要的属性：
三、代码
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 /* 12 兼容IE6，IE5 13 if (window.XMLHttpRequest){ 14 var myajax=new XMLHttpRequest() 15 }else{ 16 var myajax=new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 */ 19 var btn=document.getElementById('btn') 20 btn.onclick=function (){ 21 //1.创建Ajax对象 22 var myajax=new XMLHttpRequest() 23 //alert(myajax) //IE6及其以下版本不支持 24 //2.连接服务器 25 // open(方法，文件路径，异步传输) 26 myajax.open('GET','test1.txt',true); 27 //3.发送请求 28 myajax.send(null); 29 //4.接受返回的数据 30 myajax.onreadystatechange=function(){ //1、onreadystatechange属性的使用时连接函数 31 if(myajax.readyState==4){ //2、readyState是XMLHttpRequest对象的属性，所以要是对象.属性的方式访问 32 if (myajax.status==200) { 33 alert('成功'+myajax.responseText) //3、js中+号连接字符串 4、XMLHttpRequest对象的responseText属性获取从服务器返回的数据 34 }else{ 35 alert('失败'+myajax.status) 36 } 37 } 38 } 39 40 } 41 </script> 42 </body> 43 </html>
