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 的基本用法

1. 创建 XMLHttpRequest 对象

   语法：var myAjax=new XMLHttpRequest();

   老版本的 IE（IE5 和 IE6）使用 ActiveX 对象：
   var myAjax=new ActiveXObject("Microsoft.XMLHTTP");

2. 向服务器发送请求:使用open() 和 send() 方法：
   • open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
     1. method：请求的类型；GET 或 POST
     2. url：文件在服务器上的位置
     3. sync：true（异步）或 false（同步）
   • send(string):string：仅用于 POST 请求
3. 服务器响应

   如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

   • responseText 属性:responseText 属性返回字符串形式的响应
   • responseXML 属性:如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
4. 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  2  3  4     
      5      6      7  8  9     10     42 43