ajax原理

时间 2020-01-13

标签 ajax 原理栏目 Ajax 繁體版

原文原文链接

ajax=>Asynchronous JavaScript and XML异步传输，是指一种建立交互式网页应用的网页开发技术。javascript

经过在前端脚本(js)与服务器进行少许数据交换，AJAX可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新；传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个网页面(f5)。php

ajax执行原理：一个Ajax交互从一个称为 XMLHttpRequest 的JavaScript对象开始。如同名字所暗示的，它容许一个客户端脚本(JS)来执行HTTP请求，且将会解析一个XML格式的服务器响应。Ajax处理过程当中的第一步是建立一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上html

二、开始准备将要发送的数据前端

发送一个http请求的时候须要：正确URL，须要传给服务器的处理的数据，数据的传输方式(get|post)java

ajax.open("get|post",url+data,true|false);mysql

参数1：数据传输方式 get|postajax

参数2：请求的URL和数据user.php?参数=值&参数=值.sql

参数3：ajax请求同步仍是异步数据库

false: 同步服务器

true : 异步

一个页面中有3个AJAX同时执行

Ajax能够经过两种方法访问服务器，

同步(脚本会停留并等待服务器发送回复而后再继续)

异步(脚本容许页面继续其余进程并处理可能的回复)

同步须要等待返回结果才能继续，异步没必要等待，通常须要监听异步的结果，设置监听函数

同步是在一条直线上的队列，异步不在一个队列上各走各的

其中async是一个布尔值。若是是异步通讯方式(true)，客户机就不等待服务器的响应；若是是同步方式(false)，客户机就要等到服务器返回消息后才去执行其余操做。咱们须要根据实际须要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，若是异步：true 后一个是会覆盖前一个的，这个时候固然要指定同步方式：Flase

3. 发送数据

ajax.send(string|null);

get: null

post: string

3.1 服务器端处理数据的php代码正经常使用 $_GET|$_POST|$_REQUEST获取数据而后处理

3.2 服务器端返回数据是以页面输出流的形式返回数据

ajax捕获的是服务器端文件的输出流

4. ajax.readyState 属性监听ajax执行的过程执行到哪一步

0: ajax对象尚未建立

1: 对象已经创，尚未准备发送数据

2: 准备发送的数据已经准备完毕，尚未发送

3: 数据已经发送，尚未彻底接收

4: 数据已经发送、接收完毕

5. 设置监视的函数监听ajax在数据传输过程当中状态

ajax.onreadystatechange = 函数名();

ajax.status :监测ajax操做过程是否有错误报出

200:发送和接收没有错误

400:发送或者接收中出现了错误;

6. ajax获得服务器中返回的数据

ajax.responseText;

php页面的数据是怎么返回：

数据必须在php代码输出状态

也就是说ajax捕获服务脚本页面的输出流

reg.html

<!DOCTYPE HTML>
<html>
	<head>
		<title> ajax </title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			//第一步建立ajax对象
			var httpAjax = new XMLHttpRequest();
			//定义一个函数来检查输入的用户名是否为空，为空则返回错误，不继续往下执行代码
			function checkUser(uname){	
				if(uname == ""){
					return false;
				}
				//第四步 设置监听函数,监听ajax在数据传输过程当中状态,可是要放到前面
				httpAjax.onreadystatechange = function(){
					//4: 数据已经发送、接收完毕,200:发送和接收没有错误
					if(httpAjax.readyState == 4 && httpAjax.status == 200){
						var res = httpAjax.responseText;
						var sp = document.getElementById("sp");
						if(res == "true"){
							sp.innerHTML = "<font color='red'>已注册</font>";
						}else{
							sp.innerHTML = "<font color='green'>能够注册</font>"
						}
					}
				}
				//第二步准备发送数据
				httpAjax.open("get","user.php?uname="+uname,true);
				//uname是个变量，因此和字符串链接用个+符号
				
				//第三步发送数据,get传值方式send值为null
				httpAjax.send(null);
			}
		</script>
	</head>
	<body>
		
		<input type="text" id="username" class="username" name="username" onchange="checkUser(this.value)"/><span id="sp"></span>

	</body>
</html>

user.php

<?php
	header("content-type:text/html;charset=utf-8");
		$pdo = new PDO("mysql:host=localhost;dbname=test","root","123456");
		$pdo->exec("set names utf8");
		$uname = $_GET["uname"];
		$sql = "select * from stu_info where sname='".$uname."'";
		$data = $pdo->query($sql)->fetch(PDO::FETCH_ASSOC);
		if($data){
			echo "true";
		}else{
			echo "false";
		}
?>

数据库中的表stu_info