11 AJAX
11.1 什么是ajax
Ajax即Asynchronous Javascript And XML 异步的javascript和xml
Ajax不是一种语言。只是一种新技术。使用js进行的异步请求的技术。
xml在ajax中的作用是进行数据传递。现在使用json。
11.2 异步？
同步与异步：
异步：手拉手一起手。
同步：一个走完，另一个再走。
异步请求：在不影响当前页面的浏览的同时，可以与服务器进行交互。
11.3 异步的实现
只是浏览器不能实现异步请求。
使用js中xhr对象。xhr=》 XmlHttpRequest对象。这是一个js中的对象。
在js脚本中使用xhr对象可以向服务器发送请求。
在web基本概念中，谁发请求，谁接响应。
在web基本概念中，针对同一个服务的请求，响应结果相同。
11.4 看图说话
异步请求：使用js中的xhr对象发请求，接响应。
11.5 原生态的ajax
11.5.1 创建xhr对象
针对不同的浏览器版本，创建方式不一致。
|
var xhr=null; function createXHR() { if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { alert("can't create xhr object!"); } } |
11.5.2 设置xhr对象的参数
xhr对象的open方法。打开一个链接。
xhr.open("post", "/ajax/ajax/doajax.jsp",true);
11.5.3 发送请求
xhr对象的send方法。向服务器发送请求。
xhr.send();
11.5.4 设置回调函数
回调函数，当异步请求接收到响应时，调用的js函数。
用到xhr对象的onreadystatechange事件。xhr对象状态改变事件。
xhr.readyState==4 4表示已经接收响应状态。
xhr.status==200 200表示成功
11.5.5 接收响应文本
使用xhr对象的responseText
11.6 基于jQuery框架的ajax
11.6.1 jQuery的ajax语法格式
|
$.ajax({ type: "POST", url: "/search.do", data: {“name”:”John” , “location”:”Boston”}, success: function(msg){ alert( "Data Saved: " + msg ); } }); |
|
type: 用来指定请求的方式 Post/get |
|
url : 用来指定请求的URL地址 |
|
data ： 提交请求参数。这个格式也使用JSON |
|
success : 响应成功时的回调函数。 |
|
msg ： 响应的文本 |
|
dataType ：响应回来的数据格式 text ：纯文本 json : json |
11.6.2 导入js脚本
|
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script> |
11.6.3 编写jquery的ajax方法
|
<input type="button" value="ajax" id="searchBtn" > |
|
<script type="text/javascript"> $(function(){ $("#searchBtn").click(function(){ $.ajax({ type:"post", url:"${pageContext.request.contextPath }/search.do", data:{ "name":"XXX"}, success:function(msg){ $("#dataBody").html(msg); } }); }); }) </script> |
|
<table width="80%" border="1px" cellpadding="1" cellspacing="0"> <thead> <tr> <th>序号</th><th>商品编号</th><th>商品名称</th><th>商品价格</th><th>商品类型</th> </tr> </thead> <tbody id="dataBody"> </tbody> </table> |
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
