Ajax小结

最新推荐文章于 2022-08-02 18:27:34 发布

yuese01

最新推荐文章于 2022-08-02 18:27:34 发布

阅读量198

点赞数

分类专栏：个人总结文章标签： Ajax

本文链接：https://blog.csdn.net/qq_40429809/article/details/82867010

版权

个人总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、Ajax

Asynchronous JavaScript And XML异步的js和xml

提供一个XMLHttpRequest对象，异步的向服务器发送请求，并接收响应数据

Ajax中服务器响应的是部分数据，而不是完整的页面，可以以无刷新的效果改变页面上的内容

名词解释：

同步访问：在访问服务器时，只能等待服务器响应，不能再页面上做其他的事
1. 使用的场合：输入网址访问、a标记的跳转、submit提交
异步访问：在向服务器提交申请时，可以在界面上做其他的事
1. 使用场合：用户目名的重复性验证、聊天室、股票走势、搜索建议（搜索框）

原理：访问时，先交给XMLHttpRequest对象，对象发送请求到服务器，服务器响应回XHR对象

Ajax的核心对象： -XMLHttpRequest

核心对象的创建：IE8以上：var xhr = new XMLHttpRequest();

IE8以下：var xhr = new ActiveXObject("Mrcrosoft.XMLHttp")

在创建对象时，查看是否支持方式1的创建：

若 window.XMLHttpRequest返回结果不为null，则支持方式1，否则用方式2创建

将创建对象封装

		//封装Ajax创建对象
		function createXhr()
		{
			var xhr;
			if(window.XMLHttpRequest)
			{
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject("Mrcrosoft.XMLHttp");
			}
			return xhr;
		}

Ajax核心对象的属性：

open();方法
1. 创建请求，建立连接
2. 语法：open（method,url,isAsyn）;
  1. method:请求方式，string类型 get post
  2. url:请求的地址，string类型 (可以先拼接，在放入参数中)
  3. isAsyn：boolean类型异步true 同步 false
```
var name = $("uname").value;
var url = "day02-homeworkteach.php?uname="+name;
//先拼接地址，在传入
xhr.open("get",url,true);
```
readyState 属性
1. 作用：表示xhr的请求状态（客户端)

取值：0-4

0：请求尚未初始化

1：已经打开到web服务器的连接，正在向服务器发送请求

2：请求完成

3：正在接收服务器的响应

4：接收响应数据成功

注：服务器未找到，返回404时，状态码也是4

3.status 属性

服务器返回的状态码
值：200表示服务器返回正常，其他码额http相同

readyState ==4 && statue==200才能证明全部正确

4.onreadystatechange -事件

当readyState发生变化时，触发的操作

语法：匿名函数

xhr.onreadystatechange = function()
{
	if (xhr.readyState==4 && xhr.status==200) 
	{
		var resText = xhr.responseText;//判断成功后，执行的代码
		$("tips").innerHTML = resText;
	}
}

5.responseText + responseXML

传回的字符串、XML格式的数据

6.send();方法

发送请求
语法：xhr.send(body);

若无请求主体，则写null ,有请求主体，编写请求主体

若有采用post方式，需要在send前任意位置，函数setRequestHeader();

手动设置Content-Type:application/x-www-form-urlencoded

浏览器默认是text/plain格式

ex:send("name1=value1&name2=value2")

xhr.send(null);//get方式

//设置消息头，Content-Type
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求，有主体
var name = $("uname").value;
var pwd = $("upwd").value;
xhr.send("uname="+name+"&upwd="+pwd);

Ajax发送请求四步骤：

创建/获取 xhr对象
创建请求
设置回调函数

发送请求

//1.创建/获取xhr-先判断版本
if(window.XMLHttpRequest)
{
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject("Mrcrosoft.XMLHttp");
}
//2.创建请求
xhr.open("get","response.php",true);
//3.设置回调函数
xhr.onreadystatechange=function()
{
    if(xhr.readyState==4&&xhr.status==200)
    {    
        var resText = xhr.responseTet;
    }
}
//4.发送请求
xhr.send(null);

Ajax实例-判断用户名及密码是否符合：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册界面</title>
	<script src="../day01-03/common.js"></script>
	<script>
		function checkPwd()
		{
			var upwd = $("upwd").value;
			var cpwd = $("cpwd").value;
			if (upwd=="") 
			{
				$("show-info").innerHTML = "密码不能为空";
			}else
			{
				if (upwd==cpwd) 
				{
					$("show-info").innerHTML = "密码可用";
				}else{
					$("show-info").innerHTML = "两次面不一致";
				}				
			}

		}
		function checkUname()
		{
			var uname = $("uname").value;
			if (uname=="") 
			{
				$("show-name").innerHTML = "用户名不能为空";
			}else{
				var xhr = createXhr();		
				// var url = "02-register.php?uname="+uname;
				xhr.open("post","02-register.php",true);
				xhr.onreadystatechange = function()
				{
					if (xhr.readyState==4&&xhr.status==200) 
					{
						$("show-name").innerHTML = xhr.responseText;
					}
				}
				//设置消息头
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

				xhr.send("uname="+uname);
				}
		}
	</script>
</head>
<body>
	<div>
		<form action="01-register.php" method="post">
			<p>用户编号：<input type="text" name="id"></p>
			<p>登录名称：<input type="text" name="uname" id="uname" onblur="checkUname()"><span id="show-name"></span></p>
			<p>登录密码：<input type="password" name="upwd" id="upwd"></p>
			<p>确认密码：<input type="password" id="cpwd" onblur="checkPwd()"> <span id="show-info"></span></p>
			<p>电子邮件：<input type="email" name="uemail"></p>
			<p>联系方式：<input type="text" name="phone"></p>
			<p>用户名称：<input type="text" name="user_name"></p>
			<p>用户性别：
				<select name="gender">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</p>
			<p><input type="submit" value="注册"></p>
		</form>
	</div>
</body>
</html>

02-register.php

<?php
	$uname = $_REQUEST["uname"];
	 require("../day01-03/00-init.php");

	$sql = "select *from user where uname = '$uname'";
	$result = mysqli_query($conn,$sql);

	$row = mysqli_fetch_row($result);
	if ($row==null) {
		# code...
		echo "通过";
	}else{
		echo "用户名已存在！";
	}
?>

01-register.php

<?php
	#获取注册界面传递过来的值
	$uname = $_REQUEST["uname"];
	
	$id = $_REQUEST["id"];
	$upwd = $_REQUEST["upwd"];
	$email = $_REQUEST["uemail"];
	$phone = $_REQUEST["phone"];
	$user_name = $_REQUEST["user_name"];
	$gender = $_REQUEST["gender"];
	#连接数据库
	require("../day01-03/00-init.php");
	// $sql1 = "select *from user where uname='$uname'";
	// $res = mysqli_query($conn,$sql1);
	// $row = mysqli_fetch_array($res);
	

	$sql = "insert into user(id,uname,upwd,gender,email,phone,user_name) 
	values('$id','$uname','$upwd','$gender','$email','$phone','$user_name')";
	$result = mysqli_query($conn,$sql);
	if ($result==true) {
		# code...
		echo "<script>alert('注册成功！')</script>";
	}else{
		echo "<script>alert('注册失败！')</script>";
	}

?>

yuese01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax小结

一、AjaxAsynchronous JavaScript And XML异步的js和xml提供一个XMLHttpRequest对象，异步的向服务器发送请求，并接收响应数据Ajax中服务器响应的是部分数据，而不是完整的页面，可以以无刷新的效果改变页面上的内容名词解释：同步访问：在访问服务器时，只能等待服务器响应，不能再页面上做其他的事使用的场合：输入网址访问、a标记的跳转、...
复制链接

扫一扫