ajax-异步与同步、开发步骤

最新推荐文章于 2023-04-26 13:44:28 发布

Tommy5553

最新推荐文章于 2023-04-26 13:44:28 发布

阅读量216

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/Tommy5553/article/details/82351716

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax概述

ajax：异步的js和xml，ajax技术可以在客户端与服务器进行数据的交互，它能使js访问服务器，而且是异步访问。

服务器给客户端的响应一般是整个页面，一个html完整页面，但在ajax中因为是局部刷新，服务器就不用再响应整个页面，而只是数据。

json：js提供的数据交换格式。

异步交互和同步交互

同步：表单提交和超链接

- 发一个请求，就要等待服务器响应结束，才能发第二个请求。

- 刷新的是整个页面

异步：

- 发一个请求后，无需等待服务器的响应，然后就可以发第二个请求。

- 可以使用js接受服务器的响应，然后用js实现局部刷新。

ajax可以和服务器进行数据的交互

- 传入纯文本

- 传输XM数据

- 传输json数据

ajax的优缺点

优点：用户体验好，传输的数据量比较小，减轻服务器端的压力

缺点：异步访问服务器端的次数明显增多，对服务器造成了压力

ajax开发步骤

- XMLHttpRequest对象，异步对象，使用该对象来完成异步发送请求和接收响应的操作

- 1、获取XMLHttpRequest对象，不同浏览器之间存在差异

-- 大多数浏览器：var xhr = new XMLHttpRequest();

-- IE6：var xhr = new ActiveXObject("Msxml2.XMLHTTP");

- 2、和服务器进行连接

-- xhr.open("请求方式（GET、POST）","资源的路径","是否为异步请求（true、false）");

- 3、发送请求的数据

-- xhr.send();

-- GET请求：xhr.send(null);

-- POST请求：xhr.send("username=zhangsan&password=123");

- 4、接收服务器端做出的响应

- 5、获取响应的数据

案例：通过异步请求向html标签中添加文本（GET请求）

jsp页面

<%@ 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">
	function run(){
		//获取对象
		var xhr = createXMLHttpRequest();
		//打开连接
		xhr.open("GET","/AJAX/ajax1",true);
		//发送请求
		xhr.send(null);
		//监听xhr状态的改变
		xhr.onreadystatechange = function(){
			//双重判断
			if(xhr.readyState == 4 && xhr.status == 200){
				//接收数据
				var text = xhr.responseText;
			}
			document.getElementById("h3Id").innerHTML = text;
		}
		
		
		//获取XMLHttpRequest对象
		function createXMLHttpRequest(){
			try{
				return new XMLHttpRequest();
			}catch(e){
				try{
					return new ActiveXObjet("Msxml2.XMLHTTP");
				}catch(e){
					try{
						return new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						throw e;
					}
				}
			}
		}
	}		
	
	</script>
</head>
<body>
	<h3>异步请求测试</h3>
	<button onclick="run()">我是按钮</button>
	<h3 id="h3Id"></h3>
</body>
</html>

servlet

package com.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;

@WebServlet("/ajax1")
public class Ajax1Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().write("hello,ajax");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

POST请求提交

- 需要在open()方法请求方式修改"POST"
- 需要设置请求的头信息 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- 发送send() 指定想要发送的数据

function run(){
		//获取对象
		var xhr = createXMLHttpRequest();
		//打开连接，POST请求
		xhr.open("POST","/AJAX/ajax1",true);
		//设置请求头信息
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//发送请求
		xhr.send("username=zhangsan&password=123");
		//监听xhr状态的改变
		xhr.onreadystatechange = function(){
			//双重判断
			if(xhr.readyState == 4 && xhr.status == 200){
				//接收数据
				var text = xhr.responseText;
			}
			document.getElementById("h3Id").innerHTML = text;
		}

Tommy5553

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax-异步与同步、开发步骤

Ajax概述ajax：异步的js和xml，ajax技术可以在客户端与服务器进行数据的交互，它能使js访问服务器，而且是异步访问。服务器给客户端的响应一般是整个页面，一个html完整页面，但在ajax中因为是局部刷新，服务器就不用再响应整个页面，而只是数据。json：js提供的数据交换格式。异步交互和同步交互同步：表单提交和超链接- 发一个请求，就要等待服务器响应结束，才能发...
复制链接

扫一扫