AJAX

最新推荐文章于 2025-09-12 13:16:34 发布

转载最新推荐文章于 2025-09-12 13:16:34 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sundaren/blog/714129

文章标签：

#php #javascript #数据库 #ViewUI

本文介绍了AJAX技术的基本概念，包括其工作原理、实现步骤及应用案例。详细解释了如何使用XMLHttpRequest对象进行异步数据交换，并提供了具体的JavaScript代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

AJAX的全称：

Asynchronous JavaScript and XML(异步的JavaScript和XML)

不是某种编程语言，是无需重载的情况下更新部分网页/异步更新、局部更新

应用实例：新浪、腾讯微博，社交网站、地图等

正确发音：阿贾克斯？读法没错，只是有点土，外语正解：爱杰克斯

概念介绍——同步

概念介绍——异步

客户端无需等待，异步处理，随时检查，不堵塞你的操作流程，这就是我们AJAX的强大之处

大家此时会想之前为什么不用异步操作呢？原因就是之前缺少一个对象，这个对象就是XMLHttpRequest

有了这个对象，才有了现在的AJAX的异步请求和局部刷新

怎样实现AJAX技术

1、运用HTML和css来实现页面，表达信息（*）；

2、运用XMLHttpRequest和web服务器进行数据的异步交换（***）；

3、运用JavaScript操作DOM，实现动态局部刷新（*）；

学习步骤：

一、需要创建一个XHR对象：

二、 HTTP请求：（此部分比较麻烦，自己看难以理解，大家也不用着急，因为此部分后期会封装成一个函数，实例中引入即可，下面只是讲述原理，具体函数看蓝色字体部分)

熟悉？陌生？ http是计算机通过网络进行通信的规则，他是一种无状态协议，指的是不建立持久的链接，请求返回数据后，连接就关闭了

一个完整的HTTP请求过程，通常有7个步骤：

1.建立TCP连接

2.Web浏览器向web服务器发送请求命令

3.web浏览器发送请求头信息

4.web服务器应答

5.web服务器发送应答头信息

6.web服务器向浏览器发送数据

7.web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

1.请求的方法或动作，比如GET还是POST请求

2.正在请求的URL，总得知道请求的地址是什么吧

3.请求头，包含一些客户端环境信息，身份验证信息等

4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

GET请求：安全性较低，所以不执行修改，删除的功能，执行查询和获取的功能

（有一种说法GET请求是幂等？简单的比拟说法就好比在一个数据库里查询一万次某个员工信息都不会改变里面的数据信息）

POST请求：安全性较高，发送表单数据，执行修改、删除的功能等等

一个HTTP响应一般由三部分组成：

1. 一个数字和文字组成的状态码，用来显示请求是成功还是失败

2. 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等

3. 响应体，也就是响应正文

true表示异步请求，是默认值，可省略不写

readyState属性：

取得响应 (未封装)：

get请求：

var request = new XMLHttpRequest();

request.open("GET","get.php",true);

request.send();

request.onreadystatechange = function(){

if(request.readyState === 4&& request.status === 200){

//做一些事情 echo request.responseText

}

post请求：postbody是我们穿递的参数

var request = new XMLHttpRequest();

request.open("POST","post.php",true);

request.send(postbody);

request.onreadystatechange = function(){

if(request.readyState === 4&& request.status === 200){

//做一些事情 echo request.responseText

}

本人习惯将此二个函数放在同一个request.js文件中，后面调用即可，简单粗暴：

/*
*url是我们网络请求的地址
*successCallback是请求成功的回调函数
*errorCallback是请求失败的回调函数
*/
function requestByGET(url,successCallback,errorCallback){
	if (window.XMLHttpRequest) {
		var request = new XMLHttpRequest();
	}else{
		var request= new ActiveXObject("Microsoft.XMLHTTP");
	}
	request.open("GET",url,true);
	request.send();
	request.onreadystatechange=function(){
		if (request.readyState==4&&request.status==200) {
			//如果调用函数的时候，传入了成功的回调函数，我们调用这个函数，并把服务器返回的数据作为回调函数的参数，共外界使用
			if (successCallback) {
				successCallback(request.responseText);
			}
		}else if(request.readyState==4&&request.status!=200){
			if (errorCallback) {
				errorCallback(request.statusText);
			}
		}
	}
}

/*
*url是我们网络请求的地址
*successCallback是请求成功的回调函数
*errorCallback是请求失败的回调函数
*/
function  requestByPOST(url,postbody,successCallback,errorCallback){
	//创建一个请求对象
	if (window.XMLHttpRequest) {
		var request = new XMLHttpRequest();
	}else{
		var request = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//设置请求对象的请求地址：
	request.open("POST",url,true);
	//设置参数提交的格式
	//如果是键值对使用application/x-www-form-urlencoded 如果是文件  使用multipart/form-data
	request.setRequestHeader("content-type","application/x-www-form-urlencoded");
	request.send(postbody);
	request.onreadystatechange=function(){
		if (request.readyState == 4 && request.status == 200) {
			var response = request.responseText;
			//如果调用函数的时候，传入了成功的回调函数，我们调用这个函数，并把服务器返回的数据作为回调函数的参数，共外界使用
			if (successCallback) {
				successCallback(response);
			}
		}else if(request.readyState == 4 && request.status !=200){
			if (errorCallback) {
				errorCallback(request.statusText);
			}
		}
	}
}

三、例子简介：

实现要求：

纯html页面，用来实现员工查询和新建的页面；

php页面，用来实现查询员工和新建员工的后台接口

服务端实现代码：

本次php代码没有创建数据库进行检测，而是运用fiddler检测电脑发出的所有http发出的请求

fiddler如何使用

<?php 
//设置页面内容是html编码格式是utf-8  响应的数据
header("Content-Type:text/plain;charset=utf-8");  //纯文本
//header("Content-Type:application/json;charset=utf-8");  //json字符串
//header("Content-Type:text/xml;charset=utf-8");  
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type:application/javascript;charset=utf-8");


//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
	(
		array("name" =>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"),
		array("name" =>"郭靖","number"=>"102","sex"=>"男","job"=>"开发经理"),
		array("name" =>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理")
	);

//判断如果是get请求，则进行搜索;如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法

if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
}elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
	create();
}


//通过员工编号搜索员工
function search(){
	//检查是否有员工编号的参数
	//isset检测变量是否设置；empty判断值是否为空
	//超全局变量 $_GET 和 $_POST 用于手机表单数据
	if (!isset($_GET["number"])||($_GET["number"])) {
		echo "参数错误";
		return;
	}
	//函数之外声明的变量不能在函数内进行访问。
	//global 关键字用于访问函数内的全局变量
	global $staff;
	//获取number参数
	$number = $_GET["number"];
	$result = "没有找到员工。";

	//遍历$staff多维数组，查找key值为number的员工是否存在,如果存在，则修改返回结果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = "找到员工:员工编号：".$value["number"].",员工姓名:".$value["name"].",员工性别:".$value["sex"].",员工职位:".$value["job"];
			break;
		}
	}
	echo "$result";
}

//创建员工
function create(){
	//判断信息是否填写完全
	if (!isset($_POST["name"])||($_POST["name"])||!isset($_POST["name"])||($_POST["name"])!isset($_POST["name"])||($_POST["name"])!isset($_POST["name"])||($_POST["name"])) {
		echo "参数错误，员工信息填写不全";
		return;
	}
	//TODO：获取POST表单数据并保存到数据库
	//提示保存成功
	echo "员工:".$_POST["name"]."信息保存成功！";
}
 ?>

客户端实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style >
		*{font-size: 30px;line-height: 1.8;}
	</style>
</head>
<body>
	<h1>员工查询</h1>
	<label>请输入员工编号</label>
	<input type="text" id="number"/>
	<button id="search">查询</button>
	<p id="searchResult"></p>

	<h1>员工创建</h1>
	<label>请输入员工姓名</label>
	<input type="text" id="staffName"/><br>
	<label>请输入员工编号</label>
	<input type="text" id="staffNumber"/><br>
	<label>请输入员工性别</label>
	<select id="staffSex">
		<option>男</option>
		<option>女</option>
	</select><br>
	<label>请输入员工职位：</label>
	<input type="text" id="staffJob"/><br>
	<button id="save">保存</button>
	<p id="createResult"></p>
</body>
<script src="request.js"></script>  //此处引入上文封装的request.js的文件
<script >
	var search = document.getElementById("search");
	var number = document.getElementById("number");
	var searchResult=document.getElementById("searchResult");
	search.onclick = function(){//url+参数即为get请求方式
		var url = "p.php?number="+number.value;
		requestByGET(url,function(responseText){ //searchResult的内容变为php中返回的内容
			searchResult.innerHTML = responseText;
		});		
	}
</script>
</html>

转载于:https://my.oschina.net/sundaren/blog/714129