get请求

1.创建 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.         };
  22.     </script>
  23. </head>
  24. <body>
  26. </body>
  27. </html>

image.png
代码讲解
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() 指定接收响应结果的函数

2.get、post请求

将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
指定服务器端处理页面
open()方法
基本语法
open(请求的类型,地址,布尔值);
参数
请求的类型：GET 或 POST
地址：服务器上文件的地址
布尔值：true（异步）或 false（同步）
功能
规定请求的类型、URL 以及是否异步处理请求。

将请求发送到服务器
send()方法
基本语法
send(string);
参数
string：必须，仅用于 POST 请求；如果是GET请求方式，可用null
功能
将请求发送到服务器。

  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>
  7. </head>
  8. <body>
  10. <script type="text/javascript">
  12.       var xmlhttp;
  13.       if (window.XMLHttpRequest){
  14.           //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  15.           xmlhttp = new XMLHttpRequest();
  16.       }else{
  17.           // IE6, IE5 浏览器执行代码
  18.           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.       }
  21.       //指定接收响应结果的函数
  22.         xmlhttp.onreadystatechange = function(){
  23.           document.write(xmlhttp)
  24.         };
  25.       //指定ajax服务器端处理页面
  26.       xmlhttp.open("get","res/htmlclassics/php/city.php",true);
  28.       //发送请求
  29.       xmlhttp.send(null);
  31.     </script>
  33. </body>
  34. </html>

image.png
代码讲解
1、指定ajax服务器端处理页面
xmlhttp.open(“get”,”res/htmlclassics/php/city.php”,true);
get 请求方式为get
res/htmlclassics/php/city.php” 服务器处理地址
true 异步处理请求
2、发送请求
xmlhttp.send(null);

3.url传参

基本语法
地址?变量=值&变量=值
功能
向服务器上文件的传递数据。通过传递的数据获得相对应的值。

  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>
  7. </head>
  8. <body>
  10. <script type="text/javascript">
  12.       var xmlhttp;
  13.       if (window.XMLHttpRequest){
  14.           //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  15.           xmlhttp = new XMLHttpRequest();
  16.       }else{
  17.           // IE6, IE5 浏览器执行代码
  18.           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.       }
  21.       //指定接收响应结果的函数
  22.         xmlhttp.onreadystatechange = function(){
  24.         };
  25.       var cityCode = "010";
  26.       //指定ajax服务器端处理页面
  27.       xmlhttp.open("get","res/htmlclassics/php/city.php?id="+Math.random()+"&cityCode="+cityCode,true);
  28.       //发送请求
  29.       xmlhttp.send(null);
  31.     </script>    
  32. </body>
  33. </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 值为随机数清除缓存

4.HTTP状态码

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
就绪状态—readyState 属性
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest的状态信息。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
响应状态—status属性
200: “OK”
404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。因此当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
响应结果—responseText 属性
responseText获得字符串形式的响应数据。

  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>
  7. </head>
  8. <body>
  10. <script type="text/javascript">
  12.       var xmlhttp;
  13.       if (window.XMLHttpRequest){
  14.           //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  15.           xmlhttp = new XMLHttpRequest();
  16.       }else{
  17.           // IE6, IE5 浏览器执行代码
  18.           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.       }
  21.       //指定接收响应结果的函数
  22.         xmlhttp.onreadystatechange = function(){
  23.           if(xmlhttp.readyState == 4 && xmlhttp.status==200){
  24.             //接收响应结果
  25.               document.write(xmlhttp);
  26.               document.write(xmlhttp.responseText);
  27.         }          
  28.         };
  29.       var cityCode = "010";
  30.       //指定ajax服务器端处理页面
  31.       xmlhttp.open("get","res/htmlclassics/php/city.php?id="+Math.random()+"&cityCode="+cityCode,true);
  33.       //发送请求
  34.       xmlhttp.send(null);
  36.     </script>
  38. </body>
  39. </html>

image.png
代码讲解
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); 在浏览器中输出返回字符串形式的结果