Ajax学习总结(一)：Ajax工作流程+XMLHttpRequest对象及它的两个方法+用户名无刷新验证

最新推荐文章于 2023-10-18 10:27:08 发布

银河信仰

最新推荐文章于 2023-10-18 10:27:08 发布

阅读量362

点赞数

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.csdn.net/weixin_37716512/article/details/90718683

版权

Ajax 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

用途：快速创建动态网页，不需要刷新整个页面，只需与服务器进行少量的数据交换便可达到属于新的目的，适用于需要局部刷新的用例场景。如：省市联动、股票K线图、地图等。

Ajax工作流程：

1、浏览器创建一个XMLHttpRequest对象，发送HttpRequest请求到服务器，使用xmlHttpRequest.open()和xmlHttpRequest.send()方法，具体看代码。

2、服务器收到请求，做相应处理后返回结果到浏览器

3、客户端通过xmlRequest的属性responseText,或responseXML取得数据，实现页面的局部刷新。

XMLHttpRequest对象：

所有的现代浏览器均支持此对象，所以无需下载任何浏览器插件就能使用Ajax技术

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。

为避免浏览器的版本的原因，写出下面通用代码：

function getXmlHttpObject(){
	var xmlhttp;
	if (window.ActiveXObject)
	{
		
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		//window.alert("其他");
	
	}
	else
	{	
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
		//window.alert("dada");
		
	}
	return xmlhttp;
}

下面介绍xmlHttpRequest的open()方法和send()方法

open(method,url,async)：

open方法有三个参数，

method参数：表示请求的类型post或get类型

这两种方式的区别在后面介绍。

url参数:文件在服务器上的位置

asyn参数:同步或异步，有true（同步）和false(异步)，解释一下这两种方式的区别：

异步:在执行到此处代码的时候，javascript无需等待服务器的响应，继续执行下面的javascipt代码，当响应就绪后对其进行处理。

同步：JavaScript等待其响应就绪后才会执行，这使得在大型应用中，如果服务器繁忙，程序会出现挂起、停止现象。

实现异步主要依赖于JavaScript回调函数（顺便说一下回调函数的设计目的，回调函数是一种以参数形式传递给另一个函数的函数，太伟大了?）：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

send()方法：

如果在open方法中使用了get方法提交请求，则send()无需传参数，因为在open()方法url里已经带有数据，如下;

xmlhttp.open("GET","/try/ajax/demo?name=aaa&id=4",true);
xmlhttp.send();

如果使用了post方法提交请求，则是在send方法里传数据，这是代码需要增加一条语句设置Http头：

xmlHttpRequest.open("POST","./try/demo.jsp",true);

xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlHttpRequest.send("name=aaa&id=4");

POST与GET请求的区别：

get请求：传输简单且较快，大多数情况下能用，都有些情况不适用，比如在一个验证用户名是否可用的场景下，如果提交的用户名不发生变化，则浏览器不会真的发请求，而是获取的缓存结果数据，解决办法是：（1）在发请求的时候加一个变化的参数（如加一个随机函数）（2）在服务器送回结果禁用缓存，这样就浏览器不会使用缓存结果

post请求：（1）post传输没有数据量的限制（2）post传输更安全可靠（3）无法使用缓存文件*

下面实现一个用户名无刷新验证：

写了一个html和jsp，（话说jsp和html又有啥区别？简单来说，html只是静态页面，jsp是动态web页面，利用Java代码分析产生结果后生成html页面，产生动态结果，具体区别请参看这篇文章）

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getXmlHttpObject(){
	var xmlhttp;
	if (window.ActiveXObject)
	{
		
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		//window.alert("其他");
	
	}
	else
	{	
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
		
		
	}
	return xmlhttp;
}
var myXmlRequest="";
function checkName(){
	
	myXmlRequest=getXmlHttpObject();
	if(myXmlRequest){
		
		var url="registerProcess.jsp?username="+$("username").value;
		myXmlRequest.open("get",url,true);
		myXmlRequest.onreadystatechange=chuli;
		myXmlRequest.send(null);
	}
}
function chuli(){
	//window.alert("处理函数被调回"+myXmlRequest.readyState);
	if(myXmlRequest.readyState==4){
		//window.alert("服务器返回"+myXmlRequest.responseText);
		$('myres').innerHTML=myXmlRequest.responseText;
	}
}
function $(id){
	return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
    用户名字：<input type="text" onkeyup="checkName();" name="username1" id="username" >
    <input type="button" onclick="checkName();" value="验证用户名">
    <span style="border-width:0;color:red" type="text" id="myres"></span>
    
    <br>
    用户密码：<input type="password" name="password" ><br>
    电子邮件：<input type="text" name="email"><br>
    <input type="submit" value="用户注册">

</form>
<form action="" method="post">
    用户名字：<input type="text" name="username2"  >

    <br>
    用户密码：<input type="password" name="password" ><br>
    电子邮件：<input type="text" name="email"><br>
    <input type="submit" value="用户注册">

</form>
</body>
</html>

阐述代码流程：

1、用户输入用户名，利用<input>标签onkeyup这个监听函数触发checkname（）函数

2、checkname（）函数被触发后，获取XMLHttpRequest对象，利用这个对象用open（）send()方法向服务器发请求

3、当服务器响应就绪后触发chuli这个函数

4、chuli函数中利用$("")函数修改页面内容

jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<% 
String username=request.getParameter("username");
  if(username.equals("peng")){
	  out.println("用户名不可用");
	  
  }else{
	  out.println("用户名可用");
  }
%>
</body>
</html>

运行结果：

银河信仰

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习总结(一)：Ajax工作流程+XMLHttpRequest对象及它的两个方法+用户名无刷新验证

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）用途：快速创建动态网页，不需要刷新整个页面，只需与服务器进行少量的数据交换便可达到属于新的目的，适用于需要局部刷新的用例场景。如：省市联动、股票K线图、地图等。Ajax工作流程：1、浏览器创建一个XMLHttpRequest对象，发送HttpRequest请求到服...
复制链接

扫一扫