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）

版权声明：本文博客原创文章。博客，未经同意，不得转载。

JQuery AJAX Demo的更多相关文章

  1. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  2. jQuery ajax解析xml文件demo

    解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...

  3. Jquery Ajax调用aspx页面方法

    Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...

  4. Jquery Ajax调用aspx页面方法 (转载)

    在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进 ...

  5. jquery ajax/post/get 传参数给 mvc的action

    jquery ajax/post/get 传参数给 mvc的action1.ActionResult Test1    2.View  Test1.aspx3.ajax page4.MetaObjec ...

  6. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  7. [转载]jquery ajax/post/get 传参数给 mvc的action

    jquery ajax/post/get 传参数给 mvc的action 1.ActionResult Test1     2.View  Test1.aspx 3.ajax page 4.MetaO ...

  8. jquery Ajax应用总结

    常见应用: 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET&quo ...

  9. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

随机推荐

  1. 引用 IP电话的原理结构及其关键技术

    引用 茫然 的 两种将字符串转换成浮点数的方法 方法一: char szString[] = "-2876.99812376443"; double db1; db1 = atof ...

  2. Redhat 5.8系统安装R语言作Arima模型预测

    请见Github博客:http://wuxichen.github.io/Myblog/timeseries/2014/09/02/RJavaonLinux.html

  3. 在优化SQL语句中使用虚拟索引

    定义:虚拟索引(virtual index) 是指没有创建对应的物理段的索引. 虚拟索引的目的:是在不损耗主机CPU,IO,磁盘空间去实际创建索引的情况下,来判断一个索引是否能够对SQL优化起到作用. ...

  4. Spring (一) IOC ( Inversion Of Control )

    前序 现在小米手机很火就还拿小米手机来举例子,上一篇写的关于SSH框架搭建是从小米手机公司内个整个流程方面来考虑,如何提高效率生产效率,这篇博客主要从公司外部环境说明如何提高生产效率,那么怎么才能提高 ...

  5. iOS中的图像处理（三）——混合运算

    有时候,单独对一张图像进行处理是很难或者根本达不到我们想要的效果的.一个好的滤镜效果的诞生,往往要经过很多复杂步骤.细致微调.图片应用效果观察以及很多图层叠加. 我在JSWidget上发现了一些常用混 ...

  6. as3声谱效果，有在线演示地址，能够播放本地音乐

    来源:潮汕IT男 简单的as3声谱效果,能够播放本地音乐. tag=as3" style="word-wrap:break-word; margin:0px; padding:0p ...

  7. dreamvc框架(三),dispartcher做了些什么

    这一篇我会介绍一些dreamvc的核心类Dispatcher都做了些什么,首先我们先来看一看init方法,这是在DispatcherServlet和DispatcherFilter里面都会调用到的一个 ...

  8. ajax对服务器路径请求

    $.post('/aaaa/bbbb/cccc', { "paraName": value}, function (data) {                        S ...

  9. python中的class

    尽管Python在Function Programming中有着其他语言难以企及的的优势,但是我们也不要忘了Python也是一门OO语言哦.因此我们关注Python在FP上的优势的同时,还得了解一下P ...

  10. ios中利用NSDateComponents、NSDate、NSCalendar判断当前时间是否在一天的某个时间段内。

    应用中设置一般会存在这样的设置,如夜间勿扰模式,从8:00-23:00,此时如何判断当前时间是否在该时间段内.难点主要在于如何用NSDate生成一个8:00的时间和23:00的时间,然后用当前的时间跟 ...