AJAX 技术

最新推荐文章于 2022-04-26 22:23:13 发布

想出国的咖啡

最新推荐文章于 2022-04-26 22:23:13 发布

阅读量118

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_24380635/article/details/83375043

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（1）博文概况：这篇文章记录ajax技术：全称：Asynchronous JavaScript And XML

（2）技术简介：只刷新局部页面的技术

1）JavaScript：更新局部的网页

2）XML：一般用于请求数据和响应数据的封装

3）XMLHttpRequest对象：发送请求到服务器并获得返回结果

4）CSS：美化页面样式

5）异步：发送请求后不等返回结果，由回调函数处理结果

6）JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

7）常用属性

onreadystatechange：指定回调函数

readystate: XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

status：HTTP的状态码

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

（3）作用

1）减轻传输和服务器的负载

2）更友好的与用户交互

（4）原理

1）前端在指定事件后，异步发送请求。如失去输入焦点，键盘按下等

2）发送信息到服务器端，由servlet处理，得到结果，返回

3）再由javascript把内容写到页面

（5）例子

1）自动补全

2）弹幕等

3）步骤：三部曲

《1》创建使用Ajax的jsp：testAjax.jsp

<form name="form1" action="" method="post">
	用户名：<input type="text" id="uname" name="username" value=""
				onblur="checkUserExists()" />
	<div id="mess" style="display: inline"/>			
</form>

《2》编写Ajax的js文件

//监听js
function checkUserExists() {
	//得到表单对象
	var f = document.form1;
	//获取表单username对应的输入框值
	var username = f.username.value;
	//使用if。。else判断输入是否为空
	if (username == "") {
	    alert("用户名不能为空");
	    return false;
	} else {
		//调用doAjax的js方法
	    doAjax("CheckUserServlet?username=" + username);
	}
}

//定义全局变量。js的基本类型只有四种
var xmlhttp;
//url是请求的地址
var xmlhttp;
function doAjax(url) {
	//创建xmlhttpRequest对象
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	 } catch (e) {
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			try {
				xmhttp = new XMLHttpRequest();
				if (xmlhttp.overrideMimeType) {
					xmlhttp.overrideMimeType("text/xml");
				}
			} catch (e) {		

           }
		}
	}
	//调用回调函数：processRequest
    xmlhttp.onreadystatechange = processRequest;
    //建立与服务器的连接
    //第一个参数：请求方式post或get，第二个参数：指定请求的地址。第三个参数：指定是否使用异步请求，true/flase
	xmlhttp.open("post", url, true);
	//如果以post方式请求，必须要添加
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//指定请求的参数，如果没有就传null
	xmlhttp.send(null);

}
function processRequest() {
	//得到name为mess的html对象
	var messdiv = document.getElementById("mess");
	//xmlhttpRequest的状态信息。表示是否请求结束
	if (xmlhttp.readyState == 4)
		//HTTP的状态ma。表示是否相应结束
		if (xmlhttp.status == 200) {
			//responseText表示请求完成后，返回的字符串信息
		    if (xmlhttp.responseText == "false") messdiv.innerHTML = "用户名可以使用"; 	
		    else messdiv.innerHTML = "用户名已被使用";
		}  else {alert("请求处理返回的数据有错误");				
		}
	}

《3》创建处理异步请求的服务器程序：

1、使用 PrintWriter的print方法给前端回应：即把需要信息传送给前端

package com.test.ssm.servlet;

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

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

//继承HttpServlet
public class CheckUserServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	@Override
	public void init() throws ServletException {
		super.init();
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html");
		PrintWriter out= resp.getWriter();
		String name=req.getParameter("username");
		if (name.equals("zhangsan")) {
			out.print("true");
		}else {
			out.print("false");
		}
		out.close();
	}

	@Override
	public void destroy() {
		super.destroy();
	}
}

备注说明

一个小知识点！
1）适配器模式的一个知识点：适配器中的init(ServletConfig config)中帮我们把它当中的config对象赋值且调用一个空参的init()。
2）我们以后应该覆盖空参的init()。因为如果覆盖了这个带参数的，那么就无法实现为它的config对象赋值，由此导致其中使用config对象（this.）的方法会出错。
3）其实这种方法（调用一个空参的init()且该参数方法中什么也没做）也程序员之间的一种交流方式，告诉我们要覆盖空参的方法，这样它在帮我们做完事情会调用我们的覆盖方法

思考问题