AJAX（异步的javaScript和xml）

最新推荐文章于 2024-03-08 09:07:57 发布

小菜鸡_

最新推荐文章于 2024-03-08 09:07:57 发布

阅读量1k

点赞数 1

分类专栏： java 后端前端 servlet

未经允许不得随意转载，著作权归__盛某人所有

本文链接：https://blog.csdn.net/NaXieNianWoMenYiQ/article/details/88116184

版权

后端同时被 3 个专栏收录

41 篇文章 1 订阅

订阅专栏

java

27 篇文章 0 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

ajax创建交互式网页开发技术

用js通过http协议想服务器发送xml数据，目前更流行使用json

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

优点

AJAX使用Javascript技术向服务器发送异步请求
AJAX无须刷新整个页面
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高

缺点

AJAX并不适合所有场景，很多时候还是要使用同步交互
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题

Ajax的使用

一般我们在jQuery基础上使用有以下三种方式

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,data,callback,dataType);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

有两个参数，一个是返回的数据，一个是执行是否成功。
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback,dataType);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

$.ajax()是jQuery中的最底层的方法,该方法只有一个参数，但是这个对象里面包括了该方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选，常用参数为：

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求方式（post或get）默认为get。

data: 要求为Object或String类型的参数，发送到服务器的数据。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。重要参数json：返回JSON数据。

async：类型：Boolean。默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

contentType：默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。

重要参数：“application/json“ json格式传输

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

以上三种实现方式，get和post写代码比较少，Ajax比较清晰整洁

上代码在jQuery中这么写：

<%@ 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"
	src="${pageContext.servletContext.contextPath}/js/jquery-3.1.1.js"></script>

<title>Insert title here</title>
<script type="text/javascript">

	$(function(){
		//验证用户名是否已经存在
		$("#username").blur(function(){
	
				var username=$("#username").val();
				
				//向服务器附送异步请求
				/* $.ajax({
					//1.请求的url
					url:"${pageContext.request.contextPath}/oneServlet",
					//2.请求的类型
					type:"POST",
					//3.用户名发送过去
					data:{"name":username},
					//4.指定传输类型
					dataType:"json",
					
					//5.获取相应结果
					success:function(data){
						if(data.result==0){
							$("#errInfo").text(data.info);
						}else{
							alert("我不能判断");
						}
					}
				}); */
				
				/* $.post(
				"${pageContext.request.contextPath}/oneServlet",
				{"name":username},
				function(data,status){
					if(status=="success"){
						if(data.result==0){
							$("#errInfo").text(data.info);
						}else{
							alert("我不能判断");
						}
					}else{
						alert("获取错误");
					}
				}
				,"json"); */
				
				
				$.get(
				"${pageContext.request.contextPath}/oneServlet",
				{"name":username},
				function(data,status){
					if(status=="success"){
						if(data.result==0){
							$("#errInfo").text(data.info);
						}else{
							alert("我不能判断");
						}
					}else{
						alert("获取错误");
					}
				},
				"json"
				)
	
		});
	})

</script>
</head>
<body>

	<input type="text" id="name" value="点击按钮后看我变身">
	<button>点我</button>
	<hr>

	<form id="form1" action="" method="post">
		用户名<input id="username" type="text" name="username" />
			<span style="color: red" id="errInfo"></span><br/> 
		<input type="button" id="btn" value="注册" />
	</form>

</body>
</html>

在后端这么写

package com.java.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class OneServlet
 */
@WebServlet("/oneServlet")
public class OneServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public OneServlet() {
        super();
        // TODO Auto-generated constructor stub
    }


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String name=request.getParameter("name");
		if ("admin".equals(name)) {
			//用户已存在
			out.println("{\"result\":\"0\",\"info\":\"用户名已存在\"}");
		}else {
			out.println("{\"result\":\"1\"}");
		}
	}

	/**
	 * @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);
	}

}

小菜鸡_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX（异步的javaScript和xml）

ajax创建交互式网页开发技术用js通过http协议想服务器发送xml数据，目前更流行使用jsonAJAX最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网络内容优点AJAX使用Javascript技术向服务器发送异步请求 AJAX无须刷新整个页面因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高缺点AJAX并不适合所有...
复制链接

扫一扫