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就是与server做数据交换的，能够对网页实现局部更新。
3.什么是JQuery AJAX?
JQuery对AJAX进行了一层封装。
通过 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 从远程server上请求文本、HTML、XML 或 JSON - 同一时候您可以把这些外部数据直接加载网页的被选元素中。
4.怎样使用JQuery AJAX?
语法：
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
| 參数 | 描写叙述 |
|---|---|
| url |
必需。
规定把请求发送到哪个 URL。 |
| data | 可选。映射或字符串值。规定连同请求发送到server的数据。 |
| success(data, textStatus, jqXHR) | 可选。请求成功时运行的回调函数。 |
| dataType |
可选。规定预期的server响应的数据类型。 默认运行智能推断（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）
版权声明：本文博客原创文章。博客，未经同意，不得转载。
时间： 2025-01-07 05:19:19