AJAX笔记（一）实现异步交互基本过程

港控/mmm° 2022-04-10 04:45 303阅读 0赞

1、同步交互与异步交互

同步交互：客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等).

异步交互：客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等待)

2、AJAX（Asynchronous JavaScript and Xml）    直译中文 - javascript和XML的异步

(不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax

Ajax实现的是B/S架构下的异步交互

3、同步与异步的区别

同步交互

执行速度相对比较慢

响应的是完整的HTML页面

异步交互

执行速度相对比较快

响应的是部分数据

4、Ajax具有核心对象

XMLHttpRequest对象

创建XMLHttpRequest对象

function getXhr()\{

// 声明XMLHttpRequest对象                             //request请求

var xhr = null;

// 根据浏览器的不同情况进行创建

if(window.XMLHttpRequest)\{

// 表示除IE外的其他浏览器

xhr = new XMLHttpRequest();

\}else\{

// 表示IE浏览器

xhr = new ActiveXObject('Microsoft.XMLHttp');

return xhr;

// 创建核心对象

var xhr = getXhr();

5、Ajax的核心对象的属性方法事件

属性

readyState     0：尚未初始化   1：正在接受    2：接受完成    3：正在响应  4：响应完成

status         200：OK               404：失败        304：请求当前页面

方法

open() - 与服务器端建立连接

send() - 向服务器端发送请求

事件

onreadystatechange事件

作用 - 监听服务器端的通信状态改变

6、实现Ajax的异步交互步骤

①创建XMLHttpRequest核心对象

固定写法 - 独立编写

②与服务器端建立连接

使用XMLHttpRequest对象的open(method,url)方法

method - 设置当前请求的类型

url - 设置当前请求的地址

③向服务器端发送请求

使用XMLHttpRequest对象的send(请求参数)方法

请求参数的格式 - key=value

④接收服务器端的响应数据

使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态

使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)

使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)

使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

7、GET与POST的区别

GET请求类型

send()方法不起作用,但是不能被省略

xhr.send(null);

请求参数 - 添加到URL?key=value

POST请求类型

send()方法起作用

在send()方法被调用前,使用setRequestHeader()方法设置请求头信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

8、使用Ajax的原则

小则怡情,大则伤身

9、另外的实现Ajax的步骤

创建XMLHttpRequest对象

注册监听

建立连接

发送请求

10、实现Ajax的六步是什么?(不标准)

创建XMLHttpRequest对象

建立连接

发送请求

注册监听 - onreadystatechange事件

获取服务器端的通信状态 - readyState

获取服务器端的状态码

实例：AJAX实现二级联动

前端代码：

<!DOCTYPE html>
    <html>
     <head>
      <title>Ajax实现二级联动二</title>
      <meta charset="utf-8" />
     </head>
    
     <body>
      <select id="province">
    	<option>请选择</option>
      </select>
      <select id="city">
    	<option>请选择</option>
      </select>
      <script>
    	/*
    	 * 省份信息和城市信息全部来源于服务器端
    	 * * 第一种思路 - 基于前一个案例
    	 *   * 获取省份信息,使用一次Ajax的异步请求
    	 *   * 根据省份信息,再次使用Ajax的异步请求
    	 * * 第二种思路 - 重新思考
    	 *   * 一次性将省份和城市获取
    	 */
    	// a. 创建XMLHttpRequest对象
    	var xhr = getXhr();
    	
    	// 第一种思路 - 基于前一个案例
    	// 1. 当页面加载时,实现Ajax的异步请求 - 省份信息
    	window.onload = function(){
    		
    		// b. 建立连接 - open("get","07_province.php");
    		xhr.open("get","07_province.php");
    		// c. 发送请求 - send(null)
    		xhr.send(null);
    		// d. 接收服务器端的数据
    		xhr.onreadystatechange = function(){
    			if(xhr.readyState==4&&xhr.status==200){
    				var data = xhr.responseText;
    				// 将字符串转换为数组
    				var provinces = data.split(",");
    				// 遍历数组
    				for(var i=0;i<provinces.length;i++){
    					// 创建option元素添加到id为province元素上
    					var option = document.createElement("option");
    					var text = document.createTextNode(provinces[i]);
    					option.appendChild(text);
    					var province = document.getElementById("province");
    					province.appendChild(option);
    				}
    			}
    		}
    	}
    	// 2. 当用户选择省份信息时,实现Ajax的异步请求 - 城市信息
    	var province = document.getElementById("province");
    	province.onchange = function(){
    		// 清空
    		var city = document.getElementById("city");
    		var opts = city.getElementsByTagName("option");
    		for(var z=opts.length-1;z>0;z--){
    			city.removeChild(opts[z]);
    		}
    		
    		if(province.value != "请选择"){
    			xhr.open("post","07_cities.php");
    			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    			xhr.send("province="+province.value);
    			xhr.onreadystatechange = function(){
    				if(xhr.readyState==4&&xhr.status==200){
    					var data = xhr.responseText;
    					var cities = data.split(",");
    					for(var i=0;i<cities.length;i++){
    						var option = document.createElement("option");
    						var text = document.createTextNode(cities[i]);
    						option.appendChild(text);
    						
    						city.appendChild(option);
    					}
    				}
    			}
    		}
    		
    	}
    
    	function getXhr(){
    		var xhr = null;
    		if(window.XMLHttpRequest){
    			xhr = new XMLHttpRequest();
    		}else{
    			xhr = new ActiveXObject("Microsoft.XMLHttp");
    		}
    		return xhr;
    	}
      </script>
     </body>
    </html>

后端PHP代码

07\_cities.php

<?php
    	// 用于处理客户端请求二级联动的数据
    	// 1. 接收客户端发送的省份信息
    	$province = $_POST['province'];
    	// 2. 判断当前的省份信息,提供不同的城市信息
    	switch ($province){
    		case '山东省':
    			echo '青岛市,济南市,威海市,日照市,德州市';
    			break;
    		case '辽宁省':
    			echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
    			break;
    		case '吉林省':
    			echo '长春市,松原市,吉林市,通化市,四平市';
    			break;
    	}
    	// 服务器端响应的是字符串
    ?>

07\_province.php

<?php
    	echo '山东省,辽宁省,吉林省';
    ?>