JS原生的ajax

最新推荐文章于 2024-06-19 11:25:09 发布

编程资源宝库

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量235

点赞数 2

分类专栏：前端文章标签： ajax 异步访问

本文链接：https://blog.csdn.net/qq_38408785/article/details/89335257

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.ajax概述

1．什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死,也叫局部刷新

2．Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。

二.js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据

三.ajax的原理

传统的访问方式是客户端发送请求到服务端，等待服务端执行代码的时间后，服务端传输相应到客户端。中间会等待一定的时间
而ajax的原理是客户端中的ajax引擎发送响应到服务器，然后服务器传回数据到ajax引擎，ajax引擎传输数据到客户端。故而无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
在这里插入图片描述

四.ajax的使用

实例：
1.新建一个web项目：
结构如图：
在这里插入图片描述
ajax.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	function fn1(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
		//
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
				alert(res);
			}
		}
		//3、绑定地址
		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);//异步
		//4、发送请求
		xmlHttp.send();
		
	}
	function fn2(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span2").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("POST","/WEB22/ajaxServlet",false);//同步
		//4、发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=wangwu");
		
	}

	
</script>

</head>
<body>
	<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>

其中要注意ajax的readyState 属性用法，如图：
在这里插入图片描述
注意：
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

AjaxServlet.java:

package com.itheima.ajax01;

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

public class AjaxServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		/*
		response.getWriter().write("zhangsan");
		
		try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}*/
		
		String parameter = request.getParameter("name");
		
		response.getWriter().write(Math.random()+parameter);
		
	}

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

运行界面：
在这里插入图片描述
测试结果：点击异步访问按钮后，点击测试按钮，弹出alert对话框
点击同步访问按扭后，点击测试按钮，无响应

编程资源宝库

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS原生的ajax

一.ajax概述1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死,也叫局部刷新2．Ajax的运行原理页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意...
复制链接

扫一扫

专栏目录