AJAX进阶应用

来源：互联网发布：java源码阅读工具编辑：程序博客网时间：2024/05/23 19:19

AJAX进阶应用

JSON

1.1 JSON数据格式

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，比XML处理起来更方便，现在JSON已经逐步替代XML。

1.2 JSON规则

{‘name’:’tom’,’sex’:’man’} 键值对形式
- JSON格式由很多个键值对组成，每个键值对之间用逗号隔开
- 键和值之间用冒号隔开，值可以是数组，可以使函数，可以是对象
- 在JSON中，中括号[]表示数组，{}表示对象
- 例子

{‘name’:’tom’,’sex’:’man’,’hobby’:[‘read’,’write’]}

PHP生成JSON格式

json_encode()转换成json格式

json是数据交换格式，只能保存数据，所以将对象转换成json的时候，会删除对象的私有属性和方法!
json_decode()解析json格式

JavaScript操作JSON数据

两种访问方式
- json对象.属性
- json对象[“属性”]

JSON访问PHP的数据接口

eval()

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码

代码实现`1-demo.php`

<?php $stu=array("name"=>"tom","sex"=>"man","age"=>25);echo json_encode($stu);

`2-demo.html`

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">        window.onload=function(){            document.getElementById('btn').onclick=function(){                var req=new XMLHttpRequest();                req.open('get','./1-demo.php');                req.onreadystatechange=function(){                    if(req.readyState==4 && req.status==200){                        var str=req.responseText;                        // console.log(typeof str); //string                        //将JSON格式的字符串转换成JSON                        eval('var obj='+str);                        // console.log(typeof obj); //object                        document.getElementById('result').innerHTML="姓名："+obj.name+" 性别："+obj.sex+" 年龄："+obj.age;                    }                }                req.send(null);            }        }    </script></head><body>    <div id="result"></div>    <input type="button" value="点击" id="btn"></body></html>

利用JSON实现分页

在AJAX初级应用中实现了分页，但其实可以做进一步优化，就是只返回数据，不要返回表结构，表结构是不变的，可以在HTML页面实现`3-demo.php`

<?php//连接数据库 mysql_connect('localhost','root','root');mysql_select_db('php6');mysql_set_charset('utf8');//获取总记录数$sql="select count(*) from products";$result=mysql_query($sql);$rows=mysql_fetch_row($result);$recordCounts=$rows[0];//获取总页数$pagesize=10;$pageCounts=ceil($recordCounts/$pagesize);//获取当前页面$pageno=isset($_GET['pageno'])?$_GET['pageno']:1;if($pageno<1)    $pageno=1;if($pageno>$pageCounts)    $pageno=$pageCounts;//确定初始值及偏移量取出每页记录$startno=($pageno-1)*$pagesize;$sql="select * from products limit $startno,$pagesize";$list=mysql_query($sql);$array=array();while($rows=mysql_fetch_assoc($list)){    $array[]=$rows;}//传递总页数，循环取出页数用$array[]=$pageCounts;//转换成JSON数据echo json_encode($array);?>

`4-demo.html`

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">table,td,th{    border: #000 solid 1px;}</style></head><body><script type="text/javascript">function getPage(pageno){    var req=new XMLHttpRequest();    //建立与服务器链接    req.open('get','./3-demo.php?pageno='+pageno);    //判断请求状态    req.onreadystatechange=function(){        if(req.readyState==4 && req.status==200){             //将返回结果转成JSON对象            eval('var result='+req.responseText);            //拼接字符串            var str='<tr><th>编号</th><th>名称</th><th>规格</th><th>价格</th><th>库存量</th><th>图片</th><th>网址</th></tr>';            //循环取出JSON数据            for(var i=0,n=result.length-1;i<n;i++){                str+='<tr><td>'+result[i].proID+'</td><td>'+result[i].proname+'</td><td>'+result[i].proguige+'</td><td>'+result[i].proprice+'</td><td>'+result[i].proamount+'</td><td>'+result[i].proimages+'</td><td>'+result[i].proweb+'</td></tr>';            }            str+='<tr><td colspan="7">';            //循环取出页数            for(var i=1;i<=result[result.length-1];i++){                str+='<a href="javascript:;" onclick="getPage('+i+')">'+i+'</a>&nbsp;';            }            str+='</td></tr>';            //输出表格            document.getElementById('result').innerHTML=str;        }    }    //发送请求    req.send();}//初始化页面window.onload=function(){    getPage(1);}</script><table width='780' id='result'></table></body></html>

跨域请求

浏览器为了安全考虑，不允许跨域请求。
同源策略：一个域名下的JS只能请求同一个域名下的文件，不能跨域请求

解决办法一：标签的src属性

HTML标记的src属性没有同源测试的限制
所以直接在html文件中引入js文件即可

<script src="http://www.phpMyadmin.com/jquery.js"></script>

解决办法二：PHP代理

JS有同源策略，但是PHP没有，也就是说PHP是可以跨域的。
所以html页面向服务器请求，服务器中的php页面再向其它服务器请求，将请求结构返回给html即可
demo.php

<?php    echo file_get_contents('http://www.phpMyadmin.com/data.php');

`demo.html`

//利用ajax请求数据req.open('get','./demo.php')

解决办法三：Jsonp

原理：JSONP是客户端用get的方式传递一个回调函数的名字给服务器，服务器返回拼接好的调用函数字符串给客户端，然后客户端用js生成script标记，用script标记的src属性引入服务器生成的js代码，这样就可以获取数据了。

`demo.php`

<?php$stu=array('name'=>'tom','sex'=>'man');$stu=json_encode($stu);$fn=isset($_GET['fn'])?$_GET['fn']:'test';//返回函数名和数据，以便调用echo "$fn($stu)";

`demo.html`

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        function show(message){            alert(message);        }        window.onload=function(){            document.getElementById('btn').onclick=function()                var script=document.createElement('script');                //给src属性赋值并get传值函数名                script.src='http://www.phpMyadmin.com/demo.php?fn=show';                var body=document.getElementByTagName('body')[0];                //生成<script></script>                body.appendChild(script);            }        }    </script>    <input type="button" id="btn" value="点击"></body></html>

JQuery中封装AJAX

$.ajax
.get|.post | $.load
getScript | getJSON

语法规则
使用时要引入jquery.js文件
$.ajax({‘键’:’值’})
$.ajax的键有’type’,’url’,’data’,’success’,’error’
$.get(url地址，数据，回调函数，返回值的类型)
.post与.get语法一样
$.load在前两者基础上继续封装，但请求方式是post

代码实现
demo.php

<?php$stu=array('name'=>'tom','sex'=>'男');echo json_encode($stu);

demo.html

<body><script type="text/javascript">window.onload=function(){    document.getElementById('username').onblur=function(){        //演示$.ajax        /*        $.ajax({            'url':'./demo.php',            'type':'post',            'data':'username='+encodeURIComponent(document.getElementById('username').value),            'success':function(data){                alert(data);                }        })          */        //演示$.get()        $.get('./demo.php',function(data){            alert(data.name);            alert(data.sex);        },'json');    }}</script><input type="text" id='username'/></body>

0 0