1、ajax介绍

Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、创建 XMLHttpRequest 对象

XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

基本语法

var 请求对象 = new XMLHttpRequest();

老版本

var请求对象 = new ActiveXObject(“Microsoft.XMLHTTP”);
指定接收响应结果的函数

基本语法

请求对象.onreadystatechange = function(){
处理我返回结果的代码
};

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <script type="text/javascript" src="res/jquery/jquery-1.8.3.min.js"></script>
  6. <script type="text/javascript">
  7.       //请求对象
  8.       var xmlhttp;
  9.       if (window.XMLHttpRequest){
  10.           //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  11.           xmlhttp = new XMLHttpRequest();
  12.       }else{
  13.           // IE6, IE5 浏览器执行代码
  14.           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  15.       }
  16.       alert(xmlhttp);
  17.       //指定接收响应结果的函数
  18.         xmlhttp.onreadystatechange = function(){
  20.         };
  21.     </script>
  22. </head>
  23. <body>
  24. </body>
  25. </html>

get请求 - 图4 代码讲解

1、创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (window.XMLHttpRequest) 判断浏览器中是否有XMLHttpRequest对象

xmlhttp = new XMLHttpRequest(); 新版本创建XMLHttpRequest对象
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); 旧版本创建ActiveXObject对象

2、指定接收响应结果的函数

xmlhttp.onreadystatechange = function(){
};
xmlhttp.onreadystatechange = function() 指定接收响应结果的函数

3、get、post请求

将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

指定服务器端处理页面

open()方法

基本语法

open(请求的类型,地址,布尔值);

参数

请求的类型：GET 或 POST
地址：服务器上文件的地址
布尔值：true（异步）或 false（同步）

功能

规定请求的类型、URL 以及是否异步处理请求。

将请求发送到服务器

send()方法

基本语法

send(string);

参数

string：必须，仅用于 POST 请求；如果是GET请求方式，可用null

功能

将请求发送到服务器。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="res/jquery/jquery-1.8.3.min.js"></script>

</head>
<body>

<script type="text/javascript">

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

      //指定接收响应结果的函数
        xmlhttp.onreadystatechange = function(){
          document.write(xmlhttp)
        };
      //指定ajax服务器端处理页面
      xmlhttp.open("get","res/htmlclassics/php/city.php",true);

      //发送请求
      xmlhttp.send(null);

    </script>

</body>
</html>

get请求 - 图5 代码讲解

1、指定ajax服务器端处理页面

xmlhttp.open(“get”,”res/htmlclassics/php/city.php”,true);
get 请求方式为get
res/htmlclassics/php/city.php” 服务器处理地址
true 异步处理请求

2、发送请求

xmlhttp.send(null)；

4、url传参

基本语法

地址?变量=值&变量=值

功能

向服务器上文件的传递数据。通过传递的数据获得相对应的值。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="res/jquery/jquery-1.8.3.min.js"></script>

</head>
<body>

<script type="text/javascript">

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

      //指定接收响应结果的函数
        xmlhttp.onreadystatechange = function(){

        };
      var cityCode = "010";
      //指定ajax服务器端处理页面
      xmlhttp.open("get","res/htmlclassics/php/city.php?id="+Math.random()+"&cityCode="+cityCode,true);
      //发送请求
      xmlhttp.send(null);

    </script>    
</body>
</html>

代码讲解

1、设置参数

var cityCode = “010”;

2、服务器端处理路径

xmlhttp.open(“get”,”res/htmlclassics/php/city.php?id=”+Math.random()+”&cityCode=”+cityCode,true);
get 请求方式为get
res/htmlclassics/php/city.php 服务器处理地址
cityCode=cityCode 参数cityCode值为cityCode
true 异步处理请求

3、清除缓存

id=Math.random() 参数为id 值为随机数清除缓存

5、HTTP状态码

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

就绪状态—readyState 属性

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest的状态信息。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

响应状态—status属性

200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。因此当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

响应结果—responseText 属性

responseText获得字符串形式的响应数据。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="res/jquery/jquery-1.8.3.min.js"></script>

</head>
<body>

<script type="text/javascript">

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

      //指定接收响应结果的函数
        xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState == 4 && xmlhttp.status==200){
            //接收响应结果
              document.write(xmlhttp);
              document.write(xmlhttp.responseText);
        }          
        };
      var cityCode = "010";
      //指定ajax服务器端处理页面
      xmlhttp.open("get","res/htmlclassics/php/city.php?id="+Math.random()+"&cityCode="+cityCode,true);

      //发送请求
      xmlhttp.send(null);
    </script>
</body>
</html>

get请求 - 图6 代码讲解

1、响应结果判断

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status==200){
//接收响应结果
document.write(xmlhttp);
document.write(xmlhttp.responseText);
}
};
if(xmlhttp.readyState == 4 && xmlhttp.status==200) 判断就绪状态等于4且响应状态等于200
document.write(xmlhttp); 在浏览器中输出请求对象
document.write(xmlhttp.responseText); 在浏览器中输出返回字符串形式的结果