Ajax的简单使用（1）

最新推荐文章于 2020-08-19 23:45:13 发布

Yeoman92

最新推荐文章于 2020-08-19 23:45:13 发布

阅读量400

点赞数

分类专栏： web前端文章标签： ajax javascript

本文链接：https://blog.csdn.net/Yeoman92/article/details/52887145

版权

web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

Ajax向服务器端发送请求的四个步骤　
　　1. 创建XMLHttp对象
　　2. 设置请求方式
　　(3. 调用回调函数)
　　4. 发送请求
　　
　　下面来看下具体步骤：

1.1 创建XMLHttp对象

　　创建XMLHttp对象的语法是:

var xmlHttp = new XMLHttpRequest();

　　如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

　　一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：

//第一步：创建XMLHttpRequest对象    
var xmlHttp;          
if (window.XMLHttpRequest) {//分浏览器创建XMLHttp对象  
    xmlHttp = new XMLHttpRequest();  
} else if (window.ActiveXObject) {  
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  
}

1.2 设置请求方式

　　在WEB开发中，请求有两种形式，一个是get 一个是post，所以在这里需要设置一下具体使用哪个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。
　　

open()：
　　　
- 功能：规定请求的类型、URL 以及是否异步处理请求。
- 参数：
  - 参数1，设置请求类型（GET 或 POST）；
  - 参数2，文件在服务器上的位置；
  - 参数3，是否异步处理请求，是为true，否为false。

如下：

//第二步：设置和服务器端交互的相应参数 ，向路徑http://localhost:8080/JsLearning3/getAjax准备发送数据  
var url="http://localhost:8080/JsLearning3/getAjax";  
xmlHttp.open("POST",url,true);

　　open方法如下：
这里写图片描述

GET 还是 POST？
　　与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

异步 - True 或 False？
　　AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

1.3 调用回调函数

　　如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，xmlHttp对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：

//第三步：注册回调方法    
xmlHttp.onreadystatechange = function(){  
     if (xmlHttp.readyState == 4) {  
         if (xmlHttp.status == 200) {  
             var obj=document.getElementById(id);  
             obj.innerHTML = xmlHttp.responseText;  
         } else {  
             alert("AJAX服务器返回错误！");  
         }  
    }  
}

　　在上面代码中，xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。
　　xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面，所以这里我们判断只有当xmlHttp.status等于200的时候才可以继续执行。

var obj=document.getElementById("testid");  
obj.innerHTML = xmlHttp.responseText;

　　这段代码就是回调函数的核心内容，就是获取后台返回的数据，然后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML，其中responseText是用来获得字符串形式的响应数据，responseXML是用来获得 XML 形式的响应数据。至于选择哪一个是取决于后台给返回的数据的，这个例子里我们只是显示一条字符串数据所以选择的是responseText。responseXML将会在以后的例子中介绍。

AJAX状态值与状态码区别
　　AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）
　　AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成，详细查看RFC）
　　这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。

    if(ajax.readyState == 4 && ajax.status == 200) {。。。。);}

AJAX运行步骤与状态值说明
　　在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是：

状态	描述
0	(未初始化)还没有调用send()方法
1	(载入)已调用send()方法，正在发送请求
2	(载入完成)send()方法执行完成
3	(交互)正在解析响应内容
4	(完成)响应内容解析完成，可以在客户端调用了

　
　　对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

AJAX状态码说明

状态	描述
1**	请求收到，继续处理
2**	操作成功收到，分析、接受
3**	完成此请求必须进一步处理
4**	请求包含一个错误语法或不能完成
5**	服务器执行一个完全有效请求失败

2.4 发送请求

//第四步：设置发送请求的内容和发送报送。然后发送请求  
var params ="userName="+document.getElementsByName("userName")[0].value+"&userPass="+document.getElementsByName("userPass")[0].value+"&time="+ Math.random(); // 增加time随机参数，防止读取缓存                
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");  // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！  
xmlHttp.send(params);

简单例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function f1(){
    //浏览器方式请求：打开浏览器、输入请求地址、敲回车发送请求

    //利用ajax去请求02.php服务器端页面

    //1.创建ajax对象
    var xhr = new XMLHttpRequest();

    //2.创建新的http请求(并设置请求地址)
    //open(请求方式get/post,url请求地址)
    xhr.open('get', './02.php');

    //3.发送请求
    //send(get-null/post-给服务器传递的信息)
    xhr.send(null);

}
</script>
</head>

<body>
    <h2>ajax发起对服务器端的请求</h2>
    <input type="button" value="触发" onclick="f1()"/>
</body>
</html>

　　服务器端（02.php页面）

<?php
$fp = fopen("./02.tex","a");//追加方式打开02.txt文件（文件不存在会自动创建）
fwrite($fp,"yeoman");//给文件写内容
fclose($fp);//关闭文件
?>

　　Ajax向02.php页面发送了4次get方式请求（点击了四次请求页面的触发按钮）

这里写图片描述

下接：Ajax的简单使用（2）

Yeoman92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的简单使用（1）

Ajax向服务器端发送请求的四个步骤　　　1. 创建XMLHttp对象　　2. 设置请求方式　　(3. 调用回调函数) 　　4. 发送请求　　　　下面来看下具体步骤：1.1 创建XMLHttp对象　　创建XMLHttp对象的语法是:var xmlHttp = new XMLHttpRequest(); 　　如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：v
复制链接

扫一扫

专栏目录