AJAX小结

来源：互联网发布：颜色搭配知乎编辑：程序博客网时间：2024/05/16 10:18

1、AJAX作用

提高用户体验，较少网络数据的传输量

2、AJAX中get和post的区别

如果用post请求，必须在open之后，设置请求头

xhr.open("post","php/02-login.php",true);

xhr.setRequestHeader("Content-Type","application/x-www-form-yrlencoded");//设置请求头

2、AJAX做的事（两件事）

从服务器获取数据

解析从服务器获取的数据

3、AJAX封装

解决跨域访问的三种方式：

1、iframe

2、jsonp（最常用）

3、服务器端解决:Header(Access-Control-Allow-Origin:*）

jsonp

obj.onclick=fucnion(){

ajax({

type:"get",

url:"php/01-gettime.php",

async:true,

data:json-p,

//jsonp:"cb" //将来会替换掉地址中的callback

//jsonpCallback:"handle", //生成一个全局的方法 handle

success:function(data){

alert(data);

error:function(data){

alert("错误");

}

})

}

把json格式转为jsonp

api地址：apis.juhe.cn/cook/query?key=appkey&menu=西红柿&rn=10&pn=3

转化后（在后面加东西）:

apis.juhe.cn/cook/query?key=appkey&dtype=jsonp&callback=handle&menu=西红柿&rn=10&pn=3，

4、AJAX的一个小demo（仿照百度搜索框）完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>搜索提示框</title>    <style>    .item1{    background-color: lightGreen;    margin:0 auto;    width:30%;    line-height:50px;    }    input{    margin-left: 40px;    }    #list{    width:30%;    margin:0 auto;    }    ul{    margin:0;    background: lightGray;    width:190px;    }    ul li{    list-style: none;    }    </style>    <!-- 引入外部jquery库 -->    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>    <script type="text/javascript">    $(function(){    $("#keyword").keyup(function(e){    var kw = $("#keyword").val();    //请求资源的API地址        var url ='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+kw;        querySUG(url);    })       });     function querySUG(url){       $("#list").innerHTML="";       $.ajax({       type:"get",       async:true,       url:url,       dataType:"jsonp",       jsonp:"cb",       //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)       jsonpCallback:"callback",       //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);)       success:function(data){       var tag = "<ul>";       for (var i = 0 ; i <= data.s.length - 1; i++) {       tag += "<li>"+data.s[i]+"</li>";       }       tag +="</ul>";       $('#list').html(tag).show();       $('#list').find("li").hover(function(){       $(this).css('background','lightGreen')       },function(){$(this).css('background','lightGray');})       },       error:function(data){                alert("错误")       }       })    }    </script></head><body><div class="item1"><input type = "text" id="keyword"/><input type = "button" id="btn" value="搜索"/></div><div id="list"></div></body></html>

后面一篇博客有详细讲解这个demo；有兴趣的可以看看http://blog.csdn.net/lq_lq314/article/details/73228037

阅读全文

0 0