Ajax知识点总结

Ajax：AsynchronousJavaScriptandXML

功能：允许浏览器与服务器通信而无需刷新当前页面

例如：用户名检验，购物车更新等，能极大提高用户体验度

服务器与客户端的语言传输格式

1：HTML：轻松嵌入预订格式

2：XML：通用，但沉重

3：Json：方便简单，但有一定安全隐患

原生Ajax

原理：通过使用XMLHTTP组件XMLHttpRequest的方法，进行异步数据读取。

运行流程：

varrequest=newXMLHttpRequest();

request.open（“method”，“url”）；//建立对服务器的调用

request.send（）；//向服务器发送请求

Request.onreadystatechange=function（）{}；//追踪改变

request.readystate==4//判断响应是否完成，共四个状态

Request.status==200||Request.status==304//判断响应是否可用

request.responseText//以文本格式返回响应结果

request.responseXML//以XML格式返回响应结果

jQuery封装的Ajax方法

1：$.load(url，method，回调函数).直接载入需要的HTML。

Method默认为GET方法

可通过url+空格+selector来选择指定处返回。

如：varurl=this.href+“h2a”；

2：$.get(url，args，回调函数),$.post(url，args，回调函数)；

主页：

<scripttype="text/javascript"src="jquery-1.7.2.js"></script>

<scripttype="text/javascript">

$(function(){

$(":input[name='username']").change(function(){

varval=$(this).val();

val=$.trim(val);

if(val|=""){

varurl="valiateUserName";

varargs={"userName":val,"time":newDate()};

$.post(url,args,function(data){

$("#message").html(data);

});

}

});

})

</script>

</head>

<body>

<formmethod="post"action="">

UserName:

<divid="message"></div>

<br/>

<inputtype="submit"value="submit"/>

</form>

</body>

</html>

Servlet的配置和映射

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appversion="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<servlet-name>valiateUserNameServlet</servlet-name>

<servlet-class>valiateUserNameServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>valiateUserNameServlet</servlet-name>

<url-pattern>/valiateUserName</url-pattern>

</servlet-mapping>

</web-app>

继承自HttpServlet的valiateUserNameServlet

importjava.io.IOException;

importjava.util.Arrays;

importjava.util.List;

importjavax.servlet.servletexception;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

publicclassvaliateUserNameServletextendsHttpServlet{

privatestaticfinallongserialVersionUID=1L;

publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsservletexception,IOException{

List<String>userName=Arrays.asList("AA","BBB","CCC");

Stringusername=request.getParameter("userName");

Stringresult=null;

if(userName.contains(username)){

result="<fontcolor='red'>该用户名已经被使用</font>";

}else{

result="<fontcolor='red'>该用户名可以被使用</font>";

}

//response常用的三个方法

response.setContentType("text/html;charset=UTF-8");

response.setCharacterEncoding("UTF-8");

response.getWriter().print(result);//在浏览器中打印

}

注意：1.jQuey中的ajax方法中url，必须和WEB.XML中Servlet的数据匹配

2.可通过$("#message").html(data);的方式在指定位置显示需要的内容

3.谨记List<String>userName=Arrays.asList("AA","CCC");

4.List的contains（）方法，判断是否包含

易-14-10-21-1-25

原文地址：https://www.jb51.cc/ajax/164274.html

相关推荐