ajax请求手机端加载问题

最新推荐文章于 2022-04-22 21:25:34 发布

Smile_dip

最新推荐文章于 2022-04-22 21:25:34 发布

阅读量3.6k

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/Smile936/article/details/78282008

版权

Java 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

近期测试网站，发现手机版本的界面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的请求

    <script type="text/javascript">
    var xmlhttp;
    function loadXMLDoc(url,cfunc)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }
    function myFunction()
    {
        loadXMLDoc("/ajax/test1.txt",function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        });
    }
</script>

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

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了

a,b 非同源

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

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

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

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);
}
</script>

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

更简单的方式：

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

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

在ajax里是可以指定的：

<script type="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<data.list.length;i++）{
alert(data[i].name + " is a a" + data[i].sex);
}
}
});
</script>

在Java后台;

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

}