jQuery中的Ajax
来源:互联网 发布:一叶随风天下知秋 编辑:程序博客网 时间:2024/05/20 02:24
一,jQuery中用于发送异步请求的方法
l JQuery 对 Ajax 操作进行了封装
l 在 jQuery 中最底层的方法时 $.ajax()
l 第二层是 load(),$.get() 和 $.post(),主要方法。
l 第三层是 $.getScript() 和 $.getJSON()
(1)load()方法。
load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的HTML 代码并插入到 DOM 中。
它的结构是: load(url[, data][,callback])
程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
程序示例:<body><input type="text" name="username" id="username" /><input type="text" name="password" id="password" /><input type="button" value="发送请求" id="send" /><font color="red"><div id="d1"></div></font></body><script type="text/javascript">$(document).ready(function(){$("#send").click(function(){var json = {username : $("#username").val(),password : $("#password").val()}$("#d1").load("../servlet/DemoServlet",json,function(data,textStatus,XMLHttpRequest){alert(data);});});});</script>
l 传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
l 对于必须在加载完才能继续的操作,load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4种)和 XMLHttpRequest 对象
l 方法的返回值是 jQuery。
l 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
(2)get方法
$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout4 种.
方法的返回值:XMLHttpRequest对象
$.get() 和$.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
Get方法程序示例:<body> <input type="text" name="username" id="username" /><input type="text" name="password" id="password" /><input type="button" value="发送请求" id="but" /><div id="first"></div> </body> <script type="text/javascript"> $(function(){var json = {username : $("#username").val(),password : $("#password").val()}$("#but").click(function(){$.get("../servlet/DemoServlet",json,function(data,textStatus){//$("#first").html(data);var $node1 = $(data);$("#first").append($node1);});});}); </script>
(3)post方法
与get方法基本相同,只是将get改为post而已。
程序示例:<body> <input type="text" name="username" id="username" /> <br/><input type="text" name="password" id="password" /> <br/><input type="button" value="发送请求" id="but" /><div id="first"></div> </body> <script type="text/javascript"> $(function(){$("input[id='but']").click(function(){var json = {username : $("body:first-child").val(),password : $("body:nth-child(2)").val()}$.post("../servlet/DemoServlet",json,function(data,textStatus){var $node1 = $(data);$($("body>div").get(0)).append($node1).css("background-color","pink").css("color","blue").css("width","60px").css("height","100px");});});}); </script>
(4)getScript方法
有时候,在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时,动态创建<script>标签。但这种方式并不理想。
为此,jQuery提供了$.getScript()方法直接加载.js文件,与加载一个HTML片段一样简单方便。<body> <br/> <p> <input type="button" id="send" value="加载"/> </p><div class="comment">已有评论:</div> <div id="resText" > </div> </body> <script language="JavaScript"> $(function(){ $('#send').click(function() { $.getScript('test.js'); }); }) </script>
<body> <br/> <p> <input type="button" id="send" value="加载"/> </p><div class="comment">已有评论:</div> <div id="resText" > </div> </body> <script language="JavaScript"> $(function(){ $('#send').click(function() { $.getScript('test.js',function(){ $('#resText').html(html); }); }); }) </script>
(5)getJSON方法
含义与getScript相同,是引入*.json文件的方法,*.json文件可以看作一个文本文件,但是里面的内容必须是json格式,有格式要求。<body> <br/> <p> <input type="button" id="send" value="加载"/> </p><div class="comment">已有评论:</div> <div id="resText" > </div> </body> <script language="JavaScript"> $(function(){ $('#send').click(function() { $.getJSON('test.json', function(data) { $('#resText').empty(); var html = ''; $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); }) }) }) </script>
(6)ajax方法
使用的是key/value来配置信息,符合json格式。例如:$.ajax({url:"get.jsp",type:"post",async:true,data:json,success:function(data,textStatus){alert(data);},error:function(XMLHttpRequest,textStatus,errorThrown){alert("请求出错啦。。。");}});主要参数:
二,实现跨域请求
域名:(英语:Domain Name),又称网域、网域名称,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。
跨域:两个不同域名之间的通信,称之为跨域。例如:http://www.baidu.com和http://www.sina.com.cn。
jQuery如何实现跨域请求?使用JSONP形式实现跨域。
l 什么是JSONP
JSONP(JSON with Padding)是数据交换格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。
(1)跨域请求实现方式:
由于同源策略,一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。
(2)测试跨域请求
互联网上是不允许跨域请求的,即不允许服务器请求服务器。我们通过测试可以知道,互联网是允许一个服务器向另一个服务器发送请求信息的,但是不允许另一个服务器响应。
测试方式:通过MyEclipse+Tomcat
1,准备工作:建立一个工程,编写一个jsp文件作为请求端,再编写一个servlet,作为服务端,并使二者能够产生通信。编译之后,这个servlet的.class文件就在WEB-INF下的classes目录中了。
2,在tomcat根目录下有个webapps目录,这个文件里的ROOT文件是Tomcat的默认主页。我们也模拟tomcat建立默认主页。在tomcat的根目录下建立一个baidu文件夹,再建立一个sina文件夹,来模拟百度请求新浪的情形。但我们知道webapps不是tomcat的根目录,ROOT才是,所以我们同样需要在baidu和sina文件夹下分别建立ROOT文件夹,将工程建立在ROOT文件夹下,ROOT才是根目录。
3,然后在tomcat的配置文件server.xml文件中配置<host>,将baidu和sina都配制成主机。
4,最后将第一步的jsp文件放在baidu的ROOT下,作为请求方,将第一步的WEB-INF文件夹拷贝到sina的ROOT文件夹中,作为服务端。
5,在浏览器中测试。
三,序列化元素
l 在客户端与服务器端进行通信时,常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时,处理比较方便。但在真实项目中,往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。
l serialize()方法
该方法作用于一个jQuery对象,可以将DOM元素内容序列化为字符串。方便客户端发送请求。
l serializeArray()方法
该方法作用于一个jQuery对象,可以将DOM元素内容序列化为JSON数据格式。
注:此方法返回的是JSON对象而非JSON字符串。
四,jQuery加载并解析XML
JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历。
- 【jQuery】jQuery中的Ajax
- ajax与Jquery中的Ajax
- Jquery(六)jquery中的Ajax
- jQuery 中的ajax部分
- JQuery中的Ajax
- jQuery中的ajax应用
- jquery中的ajax
- Jquery 中的AJAX
- jquery中的ajax
- jQuery中的AJAX
- jQuery中的 Ajax
- jquery中的ajax使用
- jQuery中的Ajax 详解
- jQuery中的ajax
- JQuery 中的ajax
- jquery中的ajax方法
- Jquery中的ajax
- jQuery中的Ajax应用
- 在本机配置IIS步骤和注意事项
- Android 4.4 WebView重大改动:由Chromium驱动 支持HTML5和CSS新特性
- w7+eclipse +ndk9 NDK开发 hellow ndk 笔记(c调用java)
- 开通第一天
- 开心
- jQuery中的Ajax
- 培训机构信息系统设计与开发(三)--项目开发目录结构
- [转]MISRA--作为工业标准的C编程规范
- Aop_面向切面编程_思想理解资料02 .
- vim的基本设置
- 合伙人
- cocos2d-x3.0 Android环境配置
- lucene 使用教程
- Aop_面向切面编程_思想理解资料03 . .