Ajax的使用，内部原理的介绍，get/Post提交数据

栏目: JavaScript · 发布时间: 5年前

内容简介：全称：Asynchronous Javascript And XML（异步JavaScript和xml）并非新的技术，而实把原有的技术整合到一起：网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好(例如：当我们提交form表单的时候)。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

全称：Asynchronous Javascript And XML（异步JavaScript和xml）

并非新的技术，而实把原有的技术整合到一起：

1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

2.Ajax有什么用

网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好(例如：当我们提交form表单的时候)。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

3.内部原理

诚如我们前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。

那么现在给大家举个例子，还是以咱们的判断用户名是否已被注册为例。

传统方式：

1. 输入用户名，

2. 点击一个按钮，校验。

3. 把数据提交给服务器

4. 服务器在后台帮助我们完成校验，并且反馈信息。

5. 我们在浏览器上提示用户，给出结果
复制代码

Ajax方式：

ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被占用。那么它是如何工作的呢?

1. 通过JS 获取咱们的输入框文本内容 document.getElementById("username").value
1. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
1. 请求结束后，收到结果，再使用 js 去完成提示。
1. 可以在顺便配合 css 样式来增加提示效果。

4.使用

前面介绍的都是概念性的，只需要知道Ajax是干啥的就欧克了（后面直接用Jquery）且提交数据有两种方式：

4.1 get方式

总结一下下面的代码内容（注释解释的已经很详细了）：总共分为三步:

1.创建XmlHttpRequest对象这部分创建的对象，由于需要针对不同的浏览器，需要做出判断，所以不用直接写，以后直接拷贝即可。
2.发送请求注： request对象通过第一步的XmlHttpRequest得到。 request.open("GET","/AjaxAndJQuery/demoServlet01?name='eric'&password='123'",true); request.send();
3.响应服务器发送过来的数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//创建XmlHttpRequest对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
	 //在发送请求的同时，获取服务器响应的内容
	function get() {
		//1.创建xmlhttprequest 对象
		var request=ajaxFunction();
		//2.发送请求
		/*
		参数一： 请求类型  GET or  POST
		参数二： 请求的路径
		参数三： 是否异步， true  or false
		*/
		// request.open("GET","/AjaxAndJQuery/demoServlet01",true);
		//带数据的去请求服务器
		request.open("GET","/AjaxAndJQuery/demoServlet01?name='eric'&password='123'",true);
		request.send();
		//3.响应服务器发送过来的数据
		/*
		注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
		那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
		   //显示响应的信息
		   alert(request.responseText);
		    }
		  }
	}
</script>
</head>
<body>
	<a href="" onclick="get()">Ajax通过Get发送数据</a>
</body>
</html>
复制代码

4.1 post方式

Post请求和 Get请求基本相似，区别就在于数据传输方式不同。 Get方式是直接在地址的后面拼接的。但是Post的方式是通过send 方法传输过去的。并且还要设置一个请求头。

同上总结一下以下代码：

1.创建XmlHttpRequest对象
2.发送请求 不携带数据： request.open("POST","/AjaxAndJQuery/demoServlet01",true); request.send(); 携带数据：
request.open("POST","/AjaxAndJQuery/demoServlet01",true); request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("name=eric&password=123456");
3.接收数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//创建XmlHttpRequest对象
function  ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }
	return xmlHttp;
 }
	function Post() {
		//1.注册XmlHttpRequest对象
		var request=ajaxFunction();
		//2.发送数据
		request.open("POST","/AjaxAndJQuery/demoServlet01",true);
		//request.send();
	  //注意：如果我需要带参数请求呢？如果需要带参访问，则需要加上这两行
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  //解释：如果使用的是POST方式带数据，那么这里要添加请求头，并说明提交的数据类型是一个经过URL编码的form表单数据
		request.send("name=eric&password=123456");

		//3.接收数据
		/*
		注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
		那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
		   //显示响应的信息
		   alert(request.responseText);
		    }
		  }
	}
</script>
<title>Insert title here</title>
</head>
<body>
	<a href="" onclick="Post()">Ajax通过Post发送数据</a>
</body>
</html>
复制代码

4.2获取服务器端的响应

数据提交到的两种请求Get 和 Post基本上都会使用后，就应该想想获取数据的问题了。前面我们都一直很无私的往服务器提交数据，那么服务器返回的那些数据，我们又该怎么通过Ajax去拿呢? 这里就要靠xmlhttprequest的事件 onreadystatechange ，这是用来监听我们请求的一些状态，比如：成功了还是失败了。如果成功，想获取数据，得靠xmlhttprequest的responseText 或 responseXML 属性

/*
	注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
	那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
		   //显示响应的信息
		   alert(request.responseText);
		    }
		  }
复制代码

案例：校验用户名

需求：在登录页面，当我输入用户名的时候，能够去数据库判断该用户名是否存在。

直接上代码了... Controller类

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //获取从页面传输过来的name，调用持久层的方法，将返回结果传输到表现层
  request.setCharacterEncoding("UTF-8");
  //作用是设置对客户端请求进行重新编码的编码。
  String username = request.getParameter("username");
  userDao dao = new userDaoImpl();
  System.out.println(username);
  try {
    Long result = dao.getUserName(username);
    response.getWriter().println(result);
  } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
}
复制代码

前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//创建XmlHttpRequest对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
	function checkUserName() {
		//1.获取XMLHttpRequest对象
		var request=new ajaxFunction();
		//获取文本框的name值
		var name=document.getElementById("name").value;
		//2.发送消息
		/*想尝试一下已get方式，但是失败了
		String str="/AjaxAndJQuery/userServlet?username="+"'"+name+"'";
		alert(str);
		request.open("GET",str,true);
		request.send(); */
		request.open("POST","/AjaxAndJQuery/userServlet",true);
	  //注意：如果我需要带参数请求呢？如果需要带参访问，则需要加上这两行
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  //解释：如果使用的是POST方式带数据，那么这里要添加请求头，并说明提交的数据类型是一个经过URL编码的form表单数据
		request.send("username="+name);
		//3.接收数据
		/*
		注册监听的意思，有点像注册一个监听器，一会准备的状态发生了改变
		那就执行=右边的方法
		*/
		request.onreadystatechange=function() {
			//前半段表示readyState==4求已完成，且响应已就绪
			//status==200
		  if (request.readyState==4 && request.status==200)
		    {
			   //显示响应的信息
			   //alert(request.responseText);
			   var result=request.responseText;
			   if(result==1){
				   document.getElementById("span01").innerHTML="<font color='red'>该用户名已存在</font>";
			   }else{
				   document.getElementById("span01").innerHTML="<font color='green'>合法!</font>";
			   }
		    }
		  }

	}
</script>
<title>Insert title here</title>
</head>
<body>
<table border="1" width="500">
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>简介</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</body>
</html>
复制代码

以上所述就是小编给大家介绍的《Ajax的使用，内部原理的介绍，get/Post提交数据》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

移动Web手册

Peter-Paul Koch（彼得-保罗科赫） / 奇舞团 / 电子工业出版社 / 2015-4 / 65.00元

《移动Web手册（双色）》主要讲解了移动Web开发和传统PC网站开发的不同之处。作者首先对移动互联网相关的运营商、设备、操作系统和软件进行了简单的介绍，让读者理解移动开发的复杂之处。接下来对移动设备上的各种浏览器进行了详细介绍，以及这些浏览器的市场占有率、特性支持等。《移动Web手册（双色）》为那些想进入移动Web开发领域的人提供了一些指导性的建议并对移动Web开发的未来进行了展望。《移动......一起来看看《移动Web手册》这本书的介绍吧!

码农工具