Ajax

Ajax

Ajax(Asynchronous javaScript and Xml)并不是一种全新的技术,而整合了JavaScript XML CSS等几种现有技术。Ajax的执行流程是。通过

Ajax引擎————XMLHttpRequst对象异步发送请求服务器,服务器返回XML.JSON或HTML等格式的数据,然后利用返回的数据使用DOM和CSS技术局部更新用户界面。

 

Web开发技术和Ajax技术有什么区别?

1.发送请求方式不同。

传统Web应用通过提交表单方式发送请求,而Ajax技术通过JavaScript的XMLHttpRequest对象发送请求。

2.服务器响应不同

传统web应用服务器的响应是一个完整的页面,而采用Ajax技术后,服务器的响应只是需要的数据。

3.客户端处理的响应方式不同

传统的web应用发送请求后,浏览器将等待服务器响应完后重新加载整个页面,而采用Ajax技术后,浏览器不在等待请求的响应,而只是动态更新页面中需要更新的部分。

老版本:

<script type="text/javascript">
        function  checkUser() {
            var value=document.getElementById("username").value;
            var url="firstServlet?name="+value;
            //需要一把枪,就是Ajax
            //核心对象
            var xhr; //分情况讨论::能力检查
            if(window.XMLHttpRequest){
                //非IE浏览器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //1.建立一个请求  请求方式  url   是否异步
            xhr.open('get',url,true);
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4&&xhr.status==200){
                    //客户端已经成功接收到了Data
                    //获取到使用到responseText
                    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>
<input name="userpwd"/>
</body>
</html>

 Ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function () {
        $("#txtName").blur(function () {
            ajax();
        })
    });
    function ajax() {
        var uname=$("#txtName").val();
        $.ajax({
            url:"/firstServlet",
            type:'post',
             data:'name='+uname,
            success:function (data) {
                if(data=="true"){
                    $("#msg").html("不能");
                }else {
                    $("#msg").html("可以");
                }
            }
        })
    }
</script>
<head>
    <title>Title</title>
</head>
<body>
<input id="txtName" name="username" onblur="checkUser()"/><span id="msg"></span>
<input name="txtpwd"/>
</body>
</html>

 

 

 

 

JSON 中的那些:

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uname=request.getParameter("name");
List<User> list=new ArrayList<User>();
User user=new User();
user.setAge("12");
user.setName("肖总");
user.setAihao("呵呵");
list.add(user);
String strJSON=JSON.toJSONString(list, SerializerFeature.WriteMapNullValue,
SerializerFeature.WriteNullNumberAsZero,SerializerFeature.WriteNullStringAsEmpty);
List<User> lists=new ArrayList<User>();
//把JSON转为list
lists=JSON.parseArray(strJSON,User.class);
System.out.println("集合"+lists);
List<User> listss=new ArrayList<User>();
//
TypeReference<List<User>> typeReference = new TypeReference<List<User>>() {

};
System.out.println(typeReference.getClass()+"类型");
listss=JSON.parseObject(strJSON,typeReference);
System.out.println("集合1"+listss);
System.out.println(strJSON+"JSON");
for (User user1:listss){
System.out.println(user1);
System.out.println(user1.getName());
}
/* String msg=null;
if(uname!=null){
if("admin".equals(uname)){

msg="true";

}else {
msg="false";
}
}else {
msg="false";
}
response.getWriter().print(msg);*/
if("admin".equals(uname)){
response.setCharacterEncoding("utf-8");
response.getWriter().write("不成功");
}else {
response.setCharacterEncoding("utf-8");
response.getWriter().write("成功");
}

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
doPost(request,response);
}
posted @ 2017-03-17 13:05  时间&amp;煮雨  阅读(366)  评论(0编辑  收藏  举报