使用Ajax实现异步请求GET和POST提交方式的步骤

本文详细介绍了如何使用AJAX和jQuery实现邮箱验证功能,包括创建XMLHttpRequest对象、设置回调函数、初始化和发送请求的过程。同时,对比了GET和POST提交方式的区别,并展示了如何利用$.ajax()方法简化AJAX操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.创建XMLHttpRequest的对象(注意IE浏览器的低版本问题)。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式

 2.设置调回函数。通过onreadystatechange属性设置回调函数,其中回调函数需要自定义

 3.初始化XMLHttpRequest对象。通过open()方法设置请求的发送方式和路径

4.使用XMLHttpRequest对象发送请求。sen() 方法。当为get方式提交是 该值为null 

  1.  get方式提交时 
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    	<script type="text/javascript">
        var xmlHttp = null;
        //1.创建xmlHttpRequest对象
       function xmlHttpRequest(){
           if (window.XMLHttpRequest) {
              return new XMLHttpRequest();
           }
           else {
              return new XMLHttpRequest("Microsoft.XMLHTTP");
           }
       }
      function valss(){
          var name = $("#email").val();
          if(name==null||name.trim()==""){
              $("#div").html("邮箱不能为空");
          }else{
            $("#div").html(" ");
          }
          xmlHttp=xmlHttpRequest();
        //2.设置回调函数
        xmlHttp.onreadystatechange = context;
        //3.初始化XMLHttpRequest组件
        var url = "/ch10/servlet?name="+ name;//服务器端地址,name值
          alert(name);
        xmlHttp.open("GET",url,true);
        alert(url);
        //发射请求
        xmlHttp.send(null);
        //回调函数
        function context() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var date = xmlHttp.responseText;//拿到返回的数据类型
                alert(date);
                if (date == "true") {
                    $("#div").html("邮箱已经存在");
                } else {
                    $("#div").html("邮箱可以使用");
                }
            }
        }
      }
    </script>

     

  2. 使用post提交时   get和post提交这里主要看send()的参数是否为空
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        var xmlHttp = null;
        //1.创建xmlHttpRequest对象
       function xmlHttpRequest(){
           if (window.XMLHttpRequest) {
              return new XMLHttpRequest();
           }
           else {
              return new XMLHttpRequest("Microsoft.XMLHTTP");
           }
       }
      function valss(){
          var name = $("#email").val();
          if(name==null||name.trim()==""){
              $("#div").html("邮箱不能为空");
          }
          xmlHttp=xmlHttpRequest();
        //2.初始化XMLHttpRequest组件
          var url = "/ch10/servlet";//服务器端地址,name值
            alert(name);
          xmlHttp.open("POST", url, true);
           xmlHttp.setRequestHeader("Content-Type",
    					"application/x-www-form-urlencoded");
           xmlHttp.send("name="+name);
            //3设置回调函数
           xmlHttp.onreadystatechange = context;
             //4回调函数
            function context() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var date = xmlHttp.responseText;//拿到返回的数据类型
                alert(date);
                if (date == "true") {
                    $("#div").html("邮箱已经存在");
                } else {
                    $("#div").html("邮箱可以使用");
                }
            }
        }
      }
    </script>

     

  3. 使用$.ajax()方法  (get提交)
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
       function valss(){
           var name=$("#email").val();
           if(name==null||name.trim()==""){
           $("#div").html("邮箱不能为空");
           }else{
               $.ajax({
                   "url":"/ch10/servlet",//要提交的URL路径
                   "type":"GET",//提交的方式
                   "data" :"name="+name,//要发送到服务器的数据
                   "dataType":"text",//指定返回的数据格式
                   "success":callBack,//响应成功后要执行的代码
                   "error" :function(){//请求失败后腰之子执行的代码
                       alert("请求出错,请联系客服人员");
                   }
               });
               function callBack(data){
                          if(data=="true"){
                              $("#div").html("该邮箱已经使用");
                          }else{
                              $("#div").html("该邮箱可以使用");
                          }
               }
           }
    
       }
    </script>

     

  4.  使用$.ajax()方法  (post提交)
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
       function valss(){
           var name=$("#email").val();
           if(name==null||name.trim()==""){
           $("#div").html("邮箱不能为空");
           }else{
               $.ajax({
                   "url":"/ch10/servlet",//要提交的URL路径
                   "type":"POST",//提交的方式
                   "data" :"name="+name,//要发送到服务器的数据
                   "dataType":"text",//指定返回的数据格式
                   "success":callBack,//响应成功后要执行的代码
                   "error" :function(){//请求失败后腰之子执行的代码
                       alert("请求出错,请联系客服人员");
                   }
               });
               function callBack(data){
                          if(data=="true"){
                              $("#div").html("该邮箱已经使用");
                          }else{
                              $("#div").html("该邮箱可以使用");
                          }
               }
           }
    
       }
    </script>

     

5.以上代码都对应有一个共同的页面(光标失去事件)

 

 <form action="#" method="post" name="form">
    <table>
        <tr>
            <td>
                注册邮箱:<input type="email" name="email" id="email" onblur="valss()"/>
            </td>
            <td> <div id="div"></div></td>
        </tr>
        <tr>
            <td>
                用户名:<input type="text" name="username" id="username"/>
            </td>
        </tr>
        <tr>
            <td>
                密码:<input type="password" name="pwd" id="pwd"/></td>
        </tr>
        <tr>
            <td>
                确认密码:<input type="password" name="pwds" id="pwds"/></td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="注册"/></td>
        </tr>
    </table>
</form>

 

 6.创建servlet类

package org.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;

public class Servlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
            String email=request.getParameter("name");//name要跟URL中的key一致
           String[] array={"123@qq.com","456@qq.com","789@qq.com"};
            boolean infor=false;
            for (int i = 0; i < array.length; i++) {
            	if(array[i].equals(email)){
              	  infor=true;
                }
			}
           response.setContentType("text/html;charset=utf-8");
            PrintWriter out =response.getWriter();
            out.print(infor);//将得到的数据输出的页面
            out.flush();//刷新缓存
            out.close(); //关闭out输出     
            
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	      this.doGet(request, response);
	}



}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值