JQuery AJAX Demo
2014-08-08 15:28
141 查看
JQuery AJAX Demo
APP开发群:347072638(HTML5,APP)1.先看一个JQuery AJAX Demo
HTML端:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready(function () { jQuery.support.cors = true; $('#JQuery_AJAX_Test').click(function () { $.ajax({ type: "POST", url: "http://version.messageloop.net/index.php", data: "{ version: 1}", dataType: "json", success: function(data, textStatus, jqXHR){ alert("code:"+data.code+"\nresult:"+data.message+"\ntextStatus:"+textStatus+"\njqXHR:"+jqXHR); } }); }); }); </script> </head> <body> <a href="#" id="JQuery_AJAX_Test">JQuery AJAX Test</a><br/> <div id="result"></div> </body> </html>
PHP服务端:
<span style="font-size:12px;"><?php $output = array(); $deviceType = @$_GET['deviceType'] ? $_GET['deviceType'] : ''; $version = @$_GET['version'] ? $_GET['version'] : 0; header('Access-Control-Allow-Origin: *'); //注:这个地方很重要。<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。</span> define('ROOT', dirname(__FILE__)); $file = ROOT . '/open_device_config'; $content = file_get_contents($file); //deviceType must equal 'android' and version 大于配制文件版本号才提示OK! if ($deviceType == 'android' && $version <= $content){ $output = array('code'=>201, 'message'=>'This version can not use, you must up grade!'); exit(json_encode($output)); }else{ $output = array('code'=>200, 'message'=>'This version is OK!'); exit(json_encode($output)); } ?></span>
效果:
2.什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。AJAX就是与服务器做数据交换的,可以对网页实现局部更新。
3.什么是JQuery AJAX?
JQuery对AJAX进行了一层封装。通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。4.如何使用JQuery AJAX?
语法:jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数 | 描述 |
---|---|
url | 必需。规定把请求发送到哪个 URL。 |
data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。 默认执行智能判断(xml、json、script 或 html)。 |
详细说明
该函数是简写的 Ajax 函数,等价于:$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType });
5.注意事项
由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。如果在不同域下访问就会出现提示:No 'Access-Control-Allow-Origin' header is present
on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.
因此解决方法:
1.采用同域策略,在同一域名下。
2.在服务端设置属性,如:php服务端,header('Access-Control-Allow-Origin: *');
APP开发群:347072638(HTML5,APP)
相关文章推荐
- ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo
- [原创]jPagerBar1.2发布-jquery分页插件(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
- jQuery 中 ajax 请求数据应用的一个小demo
- 基于jquery1.4.2的百度地图标点demo-----ajax更改后台地图坐标数据
- JQuery AJAX Demo
- 使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.(更新Demo下载)
- jQuery实现ajax调用WCF服务的方法(附带demo下载)
- Jquery+ajax+json+servlet原理和Demo
- Jquery+ajax+json+servlet原理和Demo
- jQuery使用$.ajax进行异步刷新的方法(附demo下载)
- [原创]jPagerBar1.2发布(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
- jquery autocomplete插件结合ajax使用demo
- 使用JQuery方式的Ajax调用demo.aspx.cs文件后台的方法
- Jquery+ajax+json+servlet原理和Demo
- jquery ajax demo
- ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo
- JQUERY+ASP.NET的AJAX文件上传(含Demo)
- 在ashx中利用反射+jquery轻松处理ajax 含Demo源码
- Struts2学习笔记(二)使用jQuery—Ajax技术的简单Demo
- jQuery实现ajax调用WCF服务的方法(附带demo下载)