Ajax校验

时间 2019-11-12

标签 ajax 校验栏目 Ajax 繁體版

原文原文链接

1、Ajax简介javascript

AJAX即(Asynchronous JavaScript and Xml)（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。html

Ajax的关键元素包括如下内容：java

① JavaScript语言：Ajax技术的主要开发语言。jquery

② XML/JSON/HTML等：用来封装请求或响应的数据格式ajax

③ DOM(文档对象模型)：经过DOM属性或方法修改页面元素，实现页面局部刷新json

④ CSS：改变样式，美化页面效果，提高用户体验度数组

⑤ Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据。浏览器

2、Ajax工做流程服务器

3、经常使用方法：app

4、经常使用属性

5、实现思路：

　　一、锁定用户名文本框，注册onblur事件

　　二、建立XMLHttpRequest对象。经过window.XMLHttpRequest的返回值判断建立XMLHttpRequest对象的方式

　　三、设置回调函数。经过onreadystatechange属性设置回调函数，其中回调函数须要自定义

　　四、初始化XMLHttpRequest对象。经过open()设置请求的发送方式和路径

　　五、发送请求

jsp页面：

 <body>
    用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
   密码： <input type="password" name="txtPwd"/>
  </body>

建立Servlet：回送信息

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String uname = request.getParameter("uname");
        if (uname.equals("admin")) {
            //用户已经被注册了
            //回送 信息
            response.getWriter().write("OK");
            
        }else {
            response.getWriter().write("NO");
        }

注意：

步骤一：经过window。XMLHttpRequest的返回值判断当前浏览器建立XMLHttpRequest对象的方式。若是为true，说明是新版本IE或其余浏览器，可以使用new XMLHttpRequest()方式建立XMLHttpRequest对象；若是为false，说明是老版本IE浏览器，需使用new ActiveXObject("Microsoft.XMLHttp")的方式建立XMLHttpRequest对象

步骤二：经过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据

步骤三：经过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工做。第一个参数为Http请求方式，选择发送Httpget 请求，所以参数为get。第二个参数为要发送的url请求路径，将要发送的数据附加到url路径后面

步骤四：调用XMLHttpRequest对象的send()方法，参数为要发送到服务器端的数据，由于采用"get"方式请求时，参数已经附加到url路径后，因此直接设置为null。若是send()方法不设值，在不一样的浏览器下可能存在不兼容问题。

执行完毕后，异步请求的发送过程就结束！

注：使用Ajax发送Post请求需注意要设置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

采用Get方式发送请求时，一般会将须要携带的参数附加在URL路径后面一块儿发送，因此send()不须要传递参数，设置为null便可

六、使用jQuery实现Ajax

jQuery经常使用的Ajax方法

语法：$.ajax([settings]);

经常使用属性参数:

经常使用函数参数：

使用$.ajax()验证用户名--使用$.ajax() 实现异步交互

注：需引jquery-1.11.1.js库

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    
    $(function(){
    var dom=$("#txtName");
    dom.blur(function() {
        myjquery();
    });
    });
    
    function myjquery(){
    var dom=$("#txtName");
    $.ajax({
    url:'<%=path%>/servlet/CheckUserServlet',
    type:'post',
    data:{uname:dom.val()},
    success:function(result){
    alert(result);
    }        
    });            
    }    
    </script>
    
  </head>
  
  <body>
  <h2>使用jQuery实现Ajax</h2>
    用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
   密码： <input type="password" name="txtPwd"/>
  </body>

实现效果：

若输入的非admin，便可注册，不然没法注册

如果post请求，调试效果以下：

7、JSON简介

JavaScript Object Notation是一种轻量级的数据交换格式

①定义Json对象

语法：var json对象={key:value,key:value,...}

② 定义Json数组

语法：var json数组=[value,value,...]

<script type="text/javascript">
    var data={"firstName":"Brett","lastName":"hehe"};
    $.each(data,function(i,dom){
    alert(dom);
    }); 


/* var data={
    "people":[
        {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
        {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ]
};
$.each(data.people,function(i,dom){
    alert(dom.firstName);
    });
     */
    
    </script>

那么便可拿到每一个dom对象：

校验完毕，你放心，我安心。