码迷,mamicode.com
首页 > Web开发 > 详细

Ajax相关

时间:2017-03-19 15:24:38      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:stat   pwd   gif   注册   this   min   lan   span   status   

    我们先看一下js的原生ajax

直接进入代码,我们先准备好servlet,之后不会改动,所以先看一下。

技术分享
package cn.curry.servlet;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by a on 2017/3/16.
 */
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name=request.getParameter("name");
        if("admin".equals(name)){
            //打回浏览器  “已经注册”
            response.getWriter().write("Your Account Is Already Registered");
        }
        else{
            //可以注册
            response.getWriter().write("You Can Register This Account");
        }

    }

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

很简单的servlet页面,然后我们看前台jsp展示页面,我写的是发送post,请求。

技术分享
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet";
            var xhr;
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open(‘post‘,url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("name="+value);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>
技术分享

简单改一下就可以实现发送get请求。

技术分享
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet?name="+value;
            var xhr;
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open(‘get‘,url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
          
            xhr.send(null);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>
技术分享

接下来看jQuery的,简单了很多。

技术分享
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        function checkUser() {
            var value=document.getElementById("username").value;
            $.ajax({
                url : "RegisterServlet",
                type : "GET",
                data : "name="+value,
                dataType : "text",
                success : function(result){
                    document.getElementById("msg").innerText=result;
                },
                error:function () {
                    document.getElementById("msg").innerText=result;
                }

            });
        }

    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>
技术分享

Ajax相关

标签:stat   pwd   gif   注册   this   min   lan   span   status   

原文地址:http://www.cnblogs.com/an-z/p/6580264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!