ajax回顾

作者: 雨中追燕 | 来源:发表于2016-12-26 22:03 被阅读12次

ajax回顾
回顾AJAX
超详细的Ajax基础原理及使用教程
ajax的回顾
一文搞定RequestParam注解传参,map 数组文件(二
4/26day42_文件上传综合案例
4/11day31_ajax_Json
PHP基础回顾之Ajax（八）
《细说Ajax与jQuery》笔记回顾
AJAX

ajax优势
一次http请求对应一个页面
ajax,局部刷新页面，客户端（浏览器）就能与服务端进行通信
异步加载数据，无需切换页面

ajax请求过程：

创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新

js原生方法请求json数据:
网址：http://developer.baidu.com/map/carapi-7.htm

<select id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
        <option value="广州">广州</option>
    </select>
    <div id="detail"></div>
    <script type="text/javascript">
        var city = document.getElementById('city');
        var detail = document.getElementById('detail');
        function addURI(url,name,value){
              url += url.indexOf('?')==-1?'?':'&';
              //encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
              url += encodeURLComponent(name)+"="+encodeURLComponent(value);
              return url;
        }
        city.onchange = function(){
            //创建对象    兼容le
            if(window.XMLHttpRequest){
                var xhr = new XMLHttpRequest();
            }else{
                var xhr = new ActiveXObject('Microsoft.XMLHTTP')
            }
            var url =addURI('weather.php','city',this.value);
            xhr.onload = function(){
                //状态码 status 200=ok  404="未找到"
                if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                     console.log(xhr.responseText);
                    //JSON.parse()方法将一个 JSON字符串解析成一个javascript值。
                    var res = JSON.parse(xhr.responseText);
                    //基于json数组
                    var today = res.results[0].weather_data[0];
                    console.log(today);
                    //定义一个变量储存输出
                    var html = "";
                    //  for   in  循环数组
                    for(var a in today){
                        html += today[a]+"<br>";
                    }
                    detail.innerHTML = html;
                }else{
                    console.log('error='+xhr.status);
                }
            }
            //响应  true（异步）或 false（同步）
            xhr.open('get',url,true);
            xhr.send(null);
        }
    </script>

php：

<?php
    header('Content-Type:text/html;charset=utf8');
    $city = $_GET["city"];
    $url = "http://api.map.baidu.com/telematics/v3/weather?location=".$city."&output=json&ak=cTk2xI05KkdzSdC2oMqpu8WHX0puzdBo";
    echo file_get_contents($url);
 ?>

jq ajax方法:

<body>
    <input type="text" id="word">
    <div id="detail"></div>
    <script src="jquery-1.11.3.min.js" charset="utf-8"></script>
    <script type="text/javascript">
    var detail = document.getElementById('detail');
        $("#word").on('input',function(){
            $.ajax({
                //请求地址
                url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$(this).val()+'&json=1&cb=?',
                type:'GET',        //请求类型
                dataType:'jsonp',    //预期请求数据类型
                success:function(res){
                    //成功的回调
                    console.log(res.s)
                    var xyy = res.s
                    var html ="";
                    for(var a in xyy){
                      html += xyy[a] + "<br>";
                    }
                    detail.innerHTML = html
                },
                error:function(err){
                    console.log(err)
                }
            })
        })
    </script>
</body>