ajax请求手机端加载问题

近期测试网站，发现手机版本的界面ajax加载不出东西，才想着了解一下ajax的原理。

ajax:并非一种新的技术，而是几种原有技术的结合体

   1.使用CSS和XHTML来表示。

   2.使用DOM模型来交互和动态显示。

   3.使用XMLHttpRequest来和服务器进行异步通信。

   4.使用javascript来绑定和调用。

关键 XMLHttpRequest：

    XMLHttpRequest 用于在后台与服务器交换数据，

   浏览器内建 XMLHttpRequest 对象：

   XMLHttpRequest 对象的 open() 和 send() 方法：

   xmlhttp.open("GET","test1.txt",true);

   xmlhttp.send();

· method：请求的类型；GET 或 POST

· url：文件在服务器上的位置

· async：true（异步）或 false（同步）

get和post的比较

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

· 无法使用缓存文件（更新服务器上的文件或数据库）

· 向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

XMLHttpRequest有三个属性信息，用于判断和操作请求返回的结果

onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 

引入一个概念，在jquery中有回调函数的概念：

Callback 函数：简单点说就是一个函数结束后调用下一个函数

例子：先隐藏p标签，在弹出输出语句

 $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
 

同样看下面的ajax的请求

id="myDiv">
Let AJAX change this text
type="button" οnclick="myFunction()">通过 AJAX 改变内容

loadXMLDoc就相当于回调函数，先请求，再对回调值进行判断，如果返回的4：请求已完成，200：ok则输出返回的值到id为myDiv文本中

如果简写

ajax，但是内部的执行逻辑是一样的

function myFunction()
{
    $.ajax({
        type:"get",
        url:"/ajax/test1.txt",
        dataType:'json',
        success:function(data){
            $("#myDiv").empty();
            $("#myDiv").append(data);

        }
    });
}

ajax的缺点：

 1.没办法回退，对浏览器后退机制的破坏

  2.安全问题

注意JavaScript只能访问与包含它的文档在同一域下的内容。下面就是解析一下jsonP了

下面了解下“Same-Origin Policy”（同源策略）的问题

同源是指，域名，协议，端口相同

但是不会对src进行拦截，所以解决非同源调用传递的问题的关键就是src了

"text/javascript" src="http://localhost:8080/test.js">

a,b 非同源

我们可以用src在a上发请求b上的数据，

创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。接收的数据以dom的形式追加到html上。

可以简化写（摘自）：http://developer.51cto.com/art/201203/325607.htm

"text/javascript">  

     function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
     }

     window.onload = function(){
         //调用远程服务
         addScriptTag("http://localhost:20002/MyService.ashx?callback=person");

     }
     //回调函数person
     function person(data) {
         alert(data.name + " is a " + data.sex);
     }

后台正常返回json串，在外面加上    回调函数名（+json +）就好

更简单的方式：

"text/javascript">  

    $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
        alert(data.name + " is a a" + data.sex);
    });

注意这里的回调函数名都是自动生成的。

在ajax里是可以指定的： 

"text/javascript">
   $.ajax({
        url:"http://localhost:8080/medicinal?type=1callback=?",
        dataType:"jsonp",
        jsonpCallback:"person",  --回调函数名
        success:function(data){
data=eval(data);
for（var i=0;i        alert(data[i].name + " is a a" + data[i].sex);
}
        }
   });

在Java后台;

 

@RequestMapping(value = "/medicinal", produces ="application/json;charset=UTF-8;")
@ResponseBody
public String  medicinal(int type,String callback){
    List lis= medicinalService.list(type,"z");
    String json = JSONObject.toJSONString(lis);
    json=callback+"("+json+")";
    return json;

}

--这是自动获取从js中传过来的名

如果像ajax中已知callback=‘person’只需直接替换callback不过还是灵活点好