学习JQuery AJAX_H5之家 - 中国HTML5教程资源分享第一站

学习JQuery AJAX

APP开发群：347072638（HTML5,APP）

1.先看一个JQuery AJAX Demo

HTML端：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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: "", 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 ' ' is therefore not allowed access.

因此解决方法：

1.采用同域策略，在同一域名下。

2.在服务端设置属性，如：php服务端，header('Access-Control-Allow-Origin: *');

APP开发群：347072638（HTML5,APP）