Ajax no 17.

最新推荐文章于 2023-04-12 21:22:56 发布

x.1000001000

最新推荐文章于 2023-04-12 21:22:56 发布

阅读量464

点赞数

分类专栏：编程语言开发专栏文章标签： Ajax 设计案例

本文链接：https://blog.csdn.net/qq_37870369/article/details/85617938

版权

编程语言开发专栏专栏收录该内容

58 篇文章 0 订阅

订阅专栏

介绍：

Ajax 是什么？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法（把原有的技术整合）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

学习Ajax 需要 提前学习 HTML/CSS JavaScript 基础

结合的技术：

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

## Ajax 作用？
设想，没有使用Ajax有的网页需要刷新局部就必须要刷新整个网页，列如：用户名是否存在等，这样重新刷新网页就会让用户体验降低，而使用Ajax就可以提高用户体验，提前提示该用户名是否被注册。

Ajax 内部的实现？
传统方式:

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，那么就必须让浏览器重新发送一次请求到服务器，服务器接收请求并处理完毕后会把一个完整的网页返回给客户端（浏览器），浏览器将返回的整个网页内容（HTML/CSS）直接（渲染）显示给用户。

setTimeout(function(){

Location.href=’getTime.jsp’;

},1000) setInterval()
在这里插入图片描述

AJAX交互方式：”异步(局部数据)提交”

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest（Ajax对象）对象发送请求到服务器，服务器接收请求并处理完毕后，只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容后，程序员需要手动的处理返回的内容（如更新内容到页面中或处理客户端逻辑）；

在这里插入图片描述
二者的区别：

传统方式：由浏览器发送请求，使用浏览器发送请求会导致整个页面刷新，而且需要服务器返回处理完成的整个页面，浏览器直接把页面内容展示给用户。

AJAX方式：由AJAX（XMLHttpRequest）对象发送请求，当前加载完成的页面不会被刷新，而且只需要服务器返回页面的局部数据即可，最后由AJAX接收数据，并通过编程的方式把内容添加到页面中去，从而达到局部更新的目的。

异步和同步：
同步：

当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）

在这里插入图片描述
异步：

当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。

在这里插入图片描述

例子：

数据请求 Get.

不带参数的get请求：
get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript">

//执行get请求
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","/AjaxDemo/GetServlet",true);
	request.send();
	
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3><a href="" onclick="get()">这是一个Ajax的get请求页面</a></h3>
</body>
</html>

GetServlet.java

package com.web.st.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetServlet extends HttpServlet {

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
			System.out.println("获得一个get请求 ！");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

运行结果：
在这里插入图片描述

带参数的get请求：
get.jsp

function get(){
	//1.创建xmlhttprequest对象
	var request=ajaxFunction()
	//2.发送请求
	/*
	参数一：代表请求的方式：get or post
	参数二：代表请求的路径
	参数三：代表是否异步 ：true or false
	**/
	//不带参数的
	//request.open("GET","/AjaxDemo/GetServlet",true);
	//带参数的
	request.open("GET","/AjaxDemo/GetServlet?name=zhangsan&age=18",true);
	//3.获取响应数据注册监听的意思。一会准备的状态发生了改变，那么就执行等号右边的方法
	request.onreadystatechange=function(){
		//右边表示已经能够正常处理/在判断状态码是否为200
		if(request.readyState==4 && request.status==200){
			alert(request.responseText);
		}
	}
	request.send();
	
}

GetServlet.java

package com.web.st.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetServlet extends HttpServlet {

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		
			System.out.println("获得一个get请求 ！"+name+age);
			
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write("收到了一个请求");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

运行结果：
在这里插入图片描述

在这里插入图片描述
数据请求 Post.
看文档：

要是不带数据的请求就是：

request.send();

带参数的请求：
post.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript">
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.发送请求
	/*
	参数一：代表请求的方式：get or post
	参数二：代表请求的路径
	参数三：代表是否异步 ：true or false
	**/
	//不带参数的
	//request.open("GET","/AjaxDemo/GetServlet",true);
	//带参数的
	request.open("POST","/AjaxDemo/GetServlet",true);
	//这里使用的是post方式 带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//带数据过去，在send里面写表单数据
	request.send("name=lisi&age=19");
	
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>
	<a href="" onclick="post()">这是一个Ajax的post请求页面</a>
</h3>
</body>
</html>

GetServlet.java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("这是一个post请求，走的是post代码");
		doGet(request, response);
		
	}

结果：
在这里插入图片描述
获得参数：
在jsp中的 function post中加上：

request.onreadystatechange=function(){
		//右边表示已经能够正常处理/在判断状态码是否为200
		if(request.readyState==4 && request.status==200){
			alert(request.responseText);
		}
	}

结果：
在这里插入图片描述

Ajax效验用户名案例：

搭建环境：

引入配置文件。
目录如下
在这里插入图片描述

搭建数据库：
在这里插入图片描述
dome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script type="text/javascript">
//执行get请求
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 checkName(){
	
	//获取输入框的值 document 整个网页
	var name = document.getElementById("name").value; // value  value() val val()
	//1. 创建对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open("POST"  ,"/AjaxDemo/CheckServlet" , true );
	
	//注册状态改变监听，获取服务器传送过来的数据
	request.onreadystatechange = function(){
		
		if(request.readyState == 4 && request.status == 200){
			//alert(request.responseText);
			var data = request.responseText;
			if(data == 1){
				//alert("用户名已存在");
				document.getElementById("span1").innerHTML = "<font color='red'>用户名已存在!</font>";
			}else{
				document.getElementById("span1").innerHTML = "<font color='green'>用户名可用!</font>";
				//alert("用户名未存在");
			}
		}
		
	}
	
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send("name="+name);
	
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="400">
<tr>
<td>用户名：</td>
<td><input type="text" name="name" id="name"  onblur="checkName()"><span id="span1"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" name="password" id="password"></span>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
</html>

CheckServlet.java

package com.web.st.servlet;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.st.web.dao.AjaxDemoDao;
import com.st.web.dao.imp.AjaxDemoDaoImp;


public class CheckServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	
		try {	
			String name=request.getParameter("name");
		AjaxDemoDao dao=new AjaxDemoDaoImp();
			boolean isExist=dao.ChecheUserName(name);
			if(isExist){
				response.getWriter().println(1);  //存在用户名
			}else{
				response.getWriter().println(2); //不存在该用户名
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

AjaxDemoDao.java

package com.st.web.dao;

import java.sql.SQLException;

public interface AjaxDemoDao {

	 boolean ChecheUserName(String username) throws SQLException;
}

AjaxDemoDaoImp.java

package com.st.web.dao.imp;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.st.web.dao.AjaxDemoDao;
import com.st.web.util.JDBCUtil02;

public class AjaxDemoDaoImp implements AjaxDemoDao{

	@Override
	public boolean ChecheUserName(String username) throws SQLException {
		// TODO Auto-generated method stub
		
		QueryRunner runner=new  QueryRunner(JDBCUtil02.getDataSource());
		String sql="select count(*) from t_user where username =?";
	
		Long result=(Long) runner.query(sql, new ScalarHandler(),username);
		return result>0;
		
	}
	

}

运行结果如下：
在这里插入图片描述

x.1000001000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax no 17.

介绍：Ajax 是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法（把原有的技术整合）。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器...
复制链接

扫一扫

专栏目录