Ajax笔记

发布时间：2020-12-15 21:44:26 所属栏目：百科来源：网络整理

导读：Ajax简介 AJAX即“ A synchronous J avascript A nd X ML ”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的

Ajax简介

AJAX即“AsynchronousJavascriptAnd XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

实际应用如下
例如：检测注册的用户名时候已经被注册过
部分更新内容（查看下一页 / 上一页的订单）

Ajax的JQuery实现（推荐使用JQuery）
前端代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>     <!--使用百度的库，使用百度在线库-->
	<script type="text/javascript">
		$(document).ready(function(){       //确保在文档加载完之后才能运行
			$("#name").change(function(){
				$.ajax({     
				    url:"CheckID",//请求路径   ，例子访问jsp虚拟路径已在web.xml配置好“/CheckID”
				    type:"POST",//访问类型    GET
				    dataType: "json",//一般常用json
				    data:{             //POST使用data:  GET:自动转换成url路径参数
				    	name: $("#name").val()    
				    },success:function(s2){    //请求成功时的回调函数，变量为返回的json对象
				      alert(s2.isSet);    //使用json对象
				      if(s2.isSet){
				    	  $("#isSetName").text("用户名已存在！");
				    	  alert("leo");
				      }else{
				    	  alert("false");
				    	  
				      }
				    
				    },error:function(jqXHR){    //请求失败时的回调函数
				    	alert("请求失败");
				    }
				});
			});
		});
		
	</script>
</head>
<body>
<h3 id="t1">请填写注册信息</h3>
<form action="" method="post">
	name: <input type="text" name="name" id="name"/><span id="isSetName"></span><br/>
	password: <input type="password" name="password"/><br/>
	<input type="submit" value="提交注册"/>
</form>
</body>
</html>

后端代码：

public class CheckID extends HttpServlet {
	
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		String string = "{"isSet":"true"}";
		//response.setContentType("application/json");    //最好加上返回文本格式
		response.getWriter().println(string);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request,IOException {
		this.doGet(request,response);
	}

}

web.xml配置：

<servlet>
    <description></description>
    <display-name>CheckID</display-name>
    <servlet-name>CheckID</servlet-name>
    <servlet-class>com.ajax.CheckID</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CheckID</servlet-name>
    <url-pattern>/CheckID</url-pattern>
  </servlet-mapping>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!