全面解析Ajax综合应用(全)

1. SAE 数据库的连接。

AJAX即“Asynchronous Javascript And
XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

需要主机名和端口,以后的使用是一样的。

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

@ $db = new mysqli(SAE_MYSQL_HOST_M.':'.SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS,'你的应用名'); 

AJAX 是一种用于创建快速动态网页的技术。

2.XML 的处理。

通过在后台与服务器进行少量数据交换,AJAX
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

微信发送的消息格式都是 XML 格式,你返回的消息也必须是 XML 格式。从 XML
里提取数据,用 SimpleXML,强大又容易使用。包装成 XML
消息呢?把消息模板保存为字符串,然后用 sprintf 进行格式化输出。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

解析微信服务器 POST 的数据:

•”xml”: 返回 XML 文档,可用 jQuery 处理。

//---------- 接 收 数 据 ---------- // $postStr = $GLOBALS["HTTP_RAW_POST_DATA"]; //获取POST数据 //用SimpleXML解析POST过来的XML数据 $postObj = simplexml_load_string($postStr,'SimpleXMLElement',LIBXML_NOCDATA); $fromUsername = $postObj-FromUserName; //获取发送方帐号 $toUsername = $postObj-ToUserName; //获取接收方账号 $msgType = $postObj-MsgType; //消息内容 

•”html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

返回文本消息:

•”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了
“cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为
GET 请求。(因为将使用 DOM 的 script标签来加载)

function sendText($to, $from, $content, $time) { //返回消息模板 $textTpl = "xml ToUserName![CDATA[%s]]/ToUserName FromUserName![CDATA[%s]]/FromUserName CreateTime%s/CreateTime MsgType![CDATA[%s]]/MsgType Content![CDATA[%s]]/Content FuncFlag0/FuncFlag /xml"; //格式化消息模板 $msgType = "text"; $time = time(); $resultStr = sprintf($textTpl,$to,$from, $time,$msgType,$content); echo $resultStr; } 

•”json”: 返回 JSON 数据 。

3. API 接口的调用。

•”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?”
jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

网上有很多 API
接口,如百度翻译,有道翻译,天气预报等,对接口的调用可以直接用
file_get_contents ,也可以用 curl
的方式进行抓取,然后根据返回数据的格式进行数据解析,一般都是 xml
格式或者 json 格式,处理时用 SimpleXML 和 json_decode
是很方便的。对于抓取 API 内容,用重新封装的函数:

•”text”: 返回纯文本字符串

function my_get_file_contents($url){ if(function_exists('file_get_contents')){ $file_contents = file_get_contents($url); } else { //初始化一个cURL对象 $ch = curl_init(); $timeout = 5; //设置需要抓取的URL curl_setopt ($ch, CURLOPT_URL, $url); //设置cURL 参数,要求结果保存到字符串中还是输出到屏幕上 curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); //在发起连接前等待的时间,如果设置为0,则无限等待 curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout); //运行cURL,请求网页 $file_contents = curl_exec($ch); //关闭URL请求 curl_close($ch); } return $file_contents; } 百度翻译 API 的调用如下:function baiduDic($word,$from="auto",$to="auto"){ //首先对要翻译的文字进行 urlencode 处理 $word_code=urlencode($word); //注册的API Key $app; //生成翻译API的URL GET地址 $baidu_url = "_&q=".$word_code."&from=".$from."&to=".$to; $text=json_decode(my_get_file_contents($baidu_url)); $text = $text-trans_result; return $text[0]-dst; } 

一、前台传递字符串变量,后台返回字符串变量(非json格式) 

4.对 “附近” 的经纬度的计算。

  这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用javascript函数escape()对汉字字符串进行了编码,并且对返回

用如下模型,计算正方形的经纬度。采用 Haversin 公式。

的字符串使用unescape()函数进行解码,使得汉字得以正常显示。当然了,后台PHP代码也添加了头文件,以保证汉字字符串不会出现乱码。各种后台代码解决

//$EARTH_RADIUS = 6371;//地球半径,平均半径为6371km /** *计算某个经纬度的周围某段距离的正方形的四个点 * *@param lng float 经度 *@param lat float 纬度 *@param distance float 该点所在圆的半径,该圆与此正方形内切,默认值为0.5千米 *@return array 正方形的四个点的经纬度坐标 */ function returnSquarePoint($lng, $lat,$distance = 0.5){ $EARTH_RADIUS = 6371; $dlng = 2 * asin(sin($distance / (2 * $EARTH_RADIUS)) / cos(deg2rad($lat))); $dlng = rad2deg($dlng); $dlat = $distance/$EARTH_RADIUS; $dlat = rad2deg($dlat); return array( 'left-top'=array('lat'=$lat + $dlat,'lng'=$lng-$dlng), 'right-top'=array('lat'=$lat + $dlat, 'lng'=$lng + $dlng), 'left-bottom'=array('lat'=$lat - $dlat, 'lng'=$lng - $dlng), 'right-bottom'=array('lat'=$lat - $dlat, 'lng'=$lng + $dlng) ); } 将查询结果按时间降序排列,message 为数据库中的一个表,location_X 为维度,location_Y 为经度://使用此函数计算得到结果后,带入sql查询。 $squares = returnSquarePoint($lng, $lat); $query = "select * from message where location_X != 0 and location_X  ".$squares['right-bottom']['lat']." and location_X ".$squares['left-top']['lat'] ."and location_Y  ".$squares['left-top']['lng']." and location_Y ".$squares['right-bottom']['lng'] ."order by time desc"; 

汉字乱码问题的方式如下:

5. 对字符串的检查。

PHP:header(‘Content-Type:text/html;charset=GB2312’);

限定为 6-20个字母,符合则返回 true ,否则返回
false,采用正则表达式进行匹配:

 Javascript代码:

function inputCheck($word) { if(preg_match("/^[0-9a-zA-Z]{6,20}$/",$word)) { return true; } return false; } 
$(function(){
var my_data="前台变量";
my_data=escape(my_data)+"";//编码,防止汉字乱码
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(unescape(data));//解码,显示汉字
}
});
});

6.对含中文的字符串取子串时,用 mb_substr 进行截取

 PHP代码:

7.检测中英文混合的字符串长度

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
$backValue=$_POST['trans_data'];
echo $backValue."+后台返回";
php $str = "三知sunchis开发网"; echo strlen($str)."br"; //结果:22 echo mb_strlen($str,"UTF8")."br"; //结果:12 $strlen = (strlen($str)+mb_strlen($str,"UTF8"))/2; echo $strlen; //结果:17  

二、前台传递多个一维数组,后台返回字符串变量(非json格式)

8. 检测是否含有中文

  在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式,在本文的后面会详细介绍。

 $str = "测试中文"; echo $str; echo "hr"; //if (preg_match("/^[".chr(0xa1)."-".chr(0xff)."]+$/", $str)) { //只能在GB2312情况下使用 //if (preg_match("/^[/x7f-/xff]+$/", $str)) { //兼容gb2312,utf-8 //判断字符串是否全是中文 if (preg_match("/[/x7f-/xff]/", $str)) { //判断字符串中是否有中文 echo "正确输入"; } else { echo "错误输入"; }  

Javascript代码:

双字节字符编码范围1. GBK (GB2312/GB18030)/x00-/xff
GBK双字节编码范围/x20-/x7f ASCII/xa1-/xff 中文 gb2312/x80-/xff 中文 gbk

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(data);
}
});
});
  1. UTF-8 (Unicode)/u4e00-/u9fa5 中文/x3130-/x318F 韩文/xAC00-/xD7A3
    韩文/u0800-/u4e00 日文

PHP代码:

9. Jquery Mobile 的使用 官网: 原来自己写手机网页,真是无比痛苦,CSS
调试各种烦,跨平台也很不好,后来发现了这个库,果然简单了好多,而且界面看起来漂亮多了。
不过也引入了一些新的问题,比如页面内 CSS 和 Javascript 的加载,因为
Jquery Mobile 默认是使用 Ajax 加载页面的,并不会刷新整个 html
,而是请求一个 page 而已,所以对于多个 page 的页面不会完全加载,对于
head 里面的 CSS 和 Javascript
也不会加载,所以一个方法是在链接的属性里设置 ajax=false,指明不通过 Ajax
加载页面,另一个是把 CSS 和 Javascript 的加载放在 page
里面。在这里就不具体谈了。

//读取第一个数组
$backValue="trans_data:";
$trans=$_POST['trans_data'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
//读取第二个数组
$backValue=$backValue." , trans_data1:";
$trans=$_POST['trans_data1'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
echo $backValue;

10. 移动 Web 调试 一开始每次调试个页面都要手机连接 WIFI
去刷新,简直不能忍!后来终于学乖了… 推荐这个网站: 把自己的网页 url
放在顶端的输入框里面然后“Go”,你就可以看到自己网页在各个平台下了显示效果,连
Kindle 都有.. 当然,开发者必备的谷歌也可以为我们代理成手机浏览器,按 F12
进入开发者模式然后点击右下角的 setting 的图标,可以在 Overrides 里面设置
User Agent 和 Device metrics,效果同样不错。

三、前台传递多个一维数组,后台返回二维数组(json格式)

Javascript代码:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

 PHP代码:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
$backValue=array();
$backValue[0]=$_POST['trans_data'];
$backValue[1]=$_POST['trans_data1'];
echo json_encode($backValue);

四、前台传递一维数组和二维数组,后台返回二维数组(json格式)

Javascript代码:

$(function(){
var my_data=new Array();
var my_data1=new Array();
var my_data2=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
my_data2[0]=my_data;
my_data2[1]=my_data1;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

PHP代码:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
$backValue=array();
$backValue=$_POST['trans_data2'];
$backValue[2]=$_POST['trans_data'];
$backValue[3]=$_POST['trans_data1'];
echo json_encode($backValue);

以上内容是小编给大家介绍的全面解析Ajax综合应用大全,希望能够帮助到大家!

您可能感兴趣的文章:

  • AJAX的阻塞及跨域名解析
  • jQuery Ajax 全解析
  • 用JQuery
    实现AJAX加载XML并解析的脚本
  • Jquery ajax不能解析json对象,报Invalid
    JSON错误的原因和解决方法
  • Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
  • jQuery Ajax使用 全解析
  • jQuery Ajax 实例全解析
  • 一步一步学asp.net
    Ajax登录设计实现解析
  • jquery
    ajax请求实例深入解析
  • 浅析ajax请求json数据并用js解析(示例分析)
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图