Ajax入门

最新推荐文章于 2024-02-13 18:17:54 发布

chstor

最新推荐文章于 2024-02-13 18:17:54 发布

阅读量67

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_45821690/article/details/117038354

版权

JavaWeb 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

什么是Ajax

什么是Ajax

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

ajax开发步骤

1、创建一个XHR对象

XMLHttpRequest是ajax的基础
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

//1.创建一个XHR对象
		xmlhttp = null;
		if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}else{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}

2、设置回调函数

回调函数用于处理服务器响应的数据
在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

//2、设置回调函数
		xmlhttp.onreadystatechange = callback;
//回调函数
	function callback(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
	    	alert(xmlhttp.responseText);
	    }else{
	    	alert("Problem retrieving XML data");
	    }
	}

3、设置请求方式GET/POST及请求URL

通过XHR对象的open方法

如果是POST请求，

xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");```
```html
//3、设置请求方式及url
		url = "http://localhost:8080/ajax/AjaxServlet";
		xmlhttp.open("GET",url,true);

4、向服务器发送请求

通过XHR对象的send方法]

//4、向服务器发送请求
		xmlhttp.send(null);

5、在回调函数中获取服务器响应的数据

通过XHR对象的responseText方法

if (xmlhttp.readyState==4 && xmlhttp.status==200){
	    	alert(xmlhttp.responseText);
	    }else{
	    	alert("Problem retrieving XML data");
	    }

综合代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	function sendAjax(){
		//1.创建一个XHR对象
		xmlhttp = null;
		if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}else{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		//2、设置回调函数
		xmlhttp.onreadystatechange = callback;
		
		//3、设置请求方式及url
		url = "http://localhost:8080/ajax/AjaxServlet";
		xmlhttp.open("GET",url,true);
		//4、向服务器发送请求
		xmlhttp.send(null);
	}
	
	//回调函数
	function callback(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
	    	alert(xmlhttp.responseText);
	    }else{
	    	alert("Problem retrieving XML data");
	    }
	}
</script>

<body>
	<input type = "button" value = "按钮" onclick = "sendAjax()">	
</body>
</html>

Ajax案例

验证用户名是否可以使用

在这里插入图片描述
1、form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src = "/ajax/js/my.js"></script>
<script type="text/javascript">
	//验证录入的用户名是否可以使用
	function checkUsername(){
		//1.得到文本框中的信息
		var usernameValue = document.getElementById("username").value;
		//alert(usernameValue);
		//2.使用ajax向服务器发送请求，携带username信息
		//2.1获取XHR对象
		var xmlHttp = getXmlHttpRequest();
		//2.2设置回调函数
		xmlHttp.onreadystatechange = function(){
			if (xmlHttp.readyState==4 && xmlHttp.status==200){
		    	var responseMsg = xmlHttp.responseText;
		    	alert(responseMsg);
		    }else{
		    	
		    }
		};
		//2.3open设置请求路径与方式
		xmlHttp.open("POST","/ajax/userServlet");
		//2.4发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("username=" + usernameValue);
		//3.处理服务器响应的数据，在span块中显示信息
	}
</script>
<body>
	<input type = "text" id = "username" 
	onblur = "checkUsername()">
	<span id = "username_msg"></span>
</body>
</html>

2、userservlet

package com.abc.servlet;

import java.io.IOException;

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

/**
 * Servlet implementation class userServlet
 */
public class userServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String username = request.getParameter("username");
		String msg = "";
		if ("wan".equals(username)) {
			msg = "<font color = 'red'>用户名已被注册</font>";
		} else {
			msg = "<font color = 'green'>用户名很可！</font>";
		}
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(msg);
	}

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

}

3、回调函数.js

function getXmlHttpRequest(){
	var xmlhttp = null;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}else{// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

chstor

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门

什么是Ajax什么是AjaxAJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。ajax开发步骤1、创建一个XHR对象XMLHttpRequest是a
复制链接

扫一扫

专栏目录