javaScript中ajax入门

约定不等于承诺〃 2022-11-29 05:58 140阅读 0赞

> **ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做！**

> **ajax中，最关键的一句话就是var xhr = new XMLHttpRequest(); **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]** ajax01.html代码如下：**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>ajax知识</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css" />
    <link rel="stylesheet" type="text/css" href="../css/mark.css" />
    <link rel="stylesheet" type="text/css" href="../css/input2.css" />
    <link rel="stylesheet" type="text/css" href="../css/console.css" />
    </head>
    <body>
    <h1>ajax知识</h1>
    <h3>ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做</h3>
    用户名<input type="text" name="uName" id="uName" /><br />
    <input type="button" value="向服务端发送请求(验证用户名是否存在)" onclick="sendRequest();" />
    <span id="message"></span>
    <form action="">
    	<p>
    		用户名<input type="text" name="username" id="username" />
    	</p>
    	<p>
    		邮箱<input type="text" name="email" id="email" />
    	</p>
    	<p>
    		<input type="submit" value="向服务端发送请求" />
    	</p>
    </form>	
    </body>
    <script type="text/javascript">
    function sendRequest(){
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			if (this.responseText == 'true') {
    					var message1 = '<font color="red">用户名已存在</font>'
    					document.getElementById('message').innerHTML = message1;
    				}
    			else {
    				var message2 = '<font color="green">用户名可用</font>'
    				document.getElementById('message').innerHTML = message2;
    				}
    			}
    		}
    	var uName = document.getElementById('uName').value;
    	var url = '/ajax/UserNameExist?userName=' + uName;
    	xhr.open('get', url, true);
    	xhr.send(null);
    }
    	
    document.getElementsByTagName('form')[0].onsubmit = function() {
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			console.log('服务端返回的内容：' + this.responseText);
    			}
    		}
    	var url = '/ajax/ajaxData';
    	xhr.open('post', url, true);
    	var username = document.getElementById('username');
    	var email = document.getElementById('email');
    	var data = 'username=' + username.value + '&email=' + email.value;
    	console.log(data);
    	xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
    	xhr.send(data);
    	return false;
    }
    </script>
    </html>

package com.jiongmeng.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    import java.util.Vector;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 使用ajax检测用户名是否存在
     */
    @WebServlet("/UserNameExist")
    public class UserNameExist extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	List<String> userNames;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter pw = response.getWriter();
    		String userName = request.getParameter("userName");
    		boolean exist = userNames.contains(userName);
    		request.setAttribute("exist", exist);
    		System.out.println("userName = " + userName);
    		try {
    			// 模拟网络慢的情况
    			Thread.sleep(3000);
    		} catch (InterruptedException e) {
    			e.printStackTrace();
    		}
    //		String webUrl = request.getContextPath();
    //		 request.getRequestDispatcher("/userNameExist.jsp").forward(request, response);
    		// response.sendRedirect(webUrl + "/userNameExist.jsp");
    //		pw.write(exist + "");
    		pw.print(exist);
    		pw.flush();
    		pw.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    		userNames = new Vector<String>();
    		userNames.add("zhangsan");
    		userNames.add("lisi");
    		userNames.add("wangwu");
    		userNames.add("zhaoliu");
    	}
    
    }

package com.jiongmeng.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Enumeration;
    
    import javax.servlet.ServletConfig;
    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("/ajaxData")
    public class AjaxData extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter pw = response.getWriter();
    		Enumeration<String> parameterNames = request.getParameterNames();
    		StringBuffer sb = new StringBuffer();
    		while(parameterNames.hasMoreElements()){
    			String parameterName = parameterNames.nextElement();
    			String parameterValue = request.getParameter(parameterName);
    			System.out.println(parameterName + "=" + parameterValue);
    			sb.append(parameterName + "=" + parameterValue + ";");
    		}
    		try {
    			// 模拟网络慢的情况
    			Thread.sleep(3000);
    		} catch (InterruptedException e) {
    			e.printStackTrace();
    		}
    		System.out.println(sb.toString());
    		pw.print(sb.toString());
    		pw.flush();
    		pw.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    
    	}
    
    }

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/2f0279e36761459d91d50e2ec1f519ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/4e948add0a3a4eec8c667bd5ef38f4a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200819180824668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221124/7ef31124e68044e89fefedc4c602ff38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/8833571f96cf43c5ad6f0095d1134667.png