基于 XMLHttpRequest实现的Ajax请求

最新推荐文章于 2021-08-05 13:22:36 发布

a ni you

最新推荐文章于 2021-08-05 13:22:36 发布

阅读量638

点赞数

分类专栏： js 文章标签： web ajax

本文链接：https://blog.csdn.net/itlqi/article/details/44428639

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<%@ 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>Ajax实现</title>


<script type="text/javascript">
	
	/*
	  http协议  无状态协议 不保留任何信息
	     浏览器向服务器发送请求 TCP连接 关闭TCP
	  http 状态码
	  
	  1xx: 信息类，表示收到web浏览器请求，正在进行一步的处理中
	  2xx：成功，表示用户请求被正确接收，理解和处理例如：200 OK
	  3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
	  4xx：客户端错误，表示客户端提交的请求有错误，例如：404 NOT
	  5xx：服务器错误，表示服务器不能对请求的处理 例如500

	  XMLHttpRequest取得相应
	  
	  responseText ：获取字符串形式的相应数据
	  responseXML:获取xml形式的相应数据
	  status和statusText：以数字和文本的形式返回HTTP状态码
	  getAllResponseHeader():获取所有的响应报头
	  getResponseHeader()；查询相应中的某个字段的值

	 readyState 属性
	
	 0:请求未初始化，open 还没调用
	 1：服务器连接已建立，open已经调用了
	 2：请求已接收，也就是接收到头信息了
	 3：请求处理中，也就是接收到响应主体了
	 4：请求已完成，且响应已就绪，也就是响应已完成
	*/
	var rq=null;
	 function ajax(){
		// 获取 不支持IE5、6
		rq=new XMLHttpRequest();
		//open("请求方式GET/POST","请求地址url",同步异步/truefalse)
		rq.open("GET","AjaxServlet?name=zhangsan&age=4",true);	
		//设置头信息 表示向服务器发送了一个表单信息 一定是子啊open 与 send之间
		//rq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		//发送请求
		rq.send();
		
			
		//监听请求
		rq.onreadystatechange=function(){
			 
			 //响应是否完成
			 if(rq.readyState==4){
				 //请求是否成功
				 if( rq.status==200){

					 //请求返回内容
					 alert(rq.responseText);
					 
				 }else{
					 //请求是否完成
					alert("发生错误了"+rq.status);	 
				 }
				 
			 }
		 }
		
	}
	
	

</script>

</head>
<body>
		<button οnclick="ajax()">ajax</button>
</body>
</html>

服务端代码：

package csdn.test.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 AjaxServlet
 */
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		doPost(request, response);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		request.setCharacterEncoding("UTF-8");
		
		response.setContentType("text/html;charset=utf-8");
		
		String name=request.getParameter("name");
		
		String age=request.getParameter("age");
		System.out.println(name+"________"+age);
		response.getWriter().write("access");
		
	}

}

a ni you

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于 XMLHttpRequest实现的Ajax请求

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Ajax实现 /* http协议无状态协议不保留任何信息浏览器向服务器发送请求 TCP连接关闭TCP http 状态码 1xx: 信息类，表示收到we
复制链接

扫一扫