ajax课程笔记（一）

对用户输入的数据进行编

 var encodetxt = encodeURIComponent(txt);

xml

获取xml文档内容：var data = xhr.responseXML;
获取xml文档里的元素：var ele = data.getElementsByTagName(‘tagname’)[0];
生成html: 获取所有的元素后，重新按照html格式组合，用appendChild加入；
input:有表单的时候才加name 加上也可以。

JSON

    JSON.parse();//把字符串内容转化为JSon对象
    var str = "{"name":"web前端","category":"计算机"}"
    var obj = JSON.parse(str);
    console.log(obj.name);
    var str2 = JSON.stringify(obj);//把对象转化为字符串
    eval("("+str+")");//有风险，执行两次，而且可以执行里面标准的JS代码格式 eval("alert(1)");

try{}catch(e){}

即使try...里面的代码有错，也不会影响后续的代码执行
但catch里面出错了后面的也不执行了

浏览器缓存

处理浏览器缓存 get方法会把浏览器缓存保存在本地，再重新请求时不会进行ajax交互，已经改变的数据不会显示。
处理方法 ：

     if(type == 'get'){//处理浏览器缓存 请求时更新时间戳
            url += "?" + data.data + "&_t="+new Date().getTime();
        }

封装原生ajax

    function ajax(data){
    //data={data:"",dataType:"xml/json",type:"get/post"，url:"",asyn:"true/false",success:function(){},failure:function(){}}

    //data:{username:123,password:456}
    //data = 'username=123&password=456';
    //第一步：创建xhr对象
    var xhr = null;
    if(window.XMLHttpRequest){//标准的浏览器
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //第二步：准备发送前的一些配置参数
    var type = data.type == 'get'?'get':'post';
    var url = '';
    if(data.url){
        url = data.url;
        if(type == 'get'){
            url += "?" + data.data + "&_t="+new Date().getTime();
        }
    }
    var flag = data.asyn == 'true'?'true':'false';
    xhr.open(type,url,flag);

    //第三步：执行发送的动作
    if(type == 'get'){
       xhr.send(null);
    }else if(type == 'post'){
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.send(data.data);
    }

    //第四步：指定回调函数
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            if(this.status == 200){
                if(typeof data.success == 'function'){
                    var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);//调用传进来的函数
                }
            }else{
                if(typeof data.failure == 'function'){
                    data.failure();
                    }
                }
            }
        }
    }

    window.onload = function(){
        //注册按钮单击事件
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var param = {
                url:'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=101010100',
                type:'get',
                dataType:'json',
                success:function(data){
                    alert(data);
                }
            };
            ajax(param);
        }
    }

jsonp接口

• script

    <script>
      function call(data){
        console.log(data);
      }
    </script>
    <script src="./jsonp.php?_jsonp=call"></script>

• php文件：

    <?php 
      $callback = $_GET[_jsonp];
      $arr = array("Chris","Lee","李三岁);
      echo $callback ."(".json_encode($arr).")";
    ?>

jsonp 与script标签实现跨域

    window.onload = function(){
            var city = document.getElementById('city');
            city.onchange = function(){
                document.getElementById('info').innerHTML = '';
            }
            var btn = document.getElementById('btn');
            
            btn.onclick = function(){
                var cityCode = city.value;
                var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=abc&code='+city.value;
                var script = document.createElement('script');
                script.src = url;
                document.body.appendChild(script);
            }

    }

jQuery ajax

1. jQuery onload
   $(function());或$(document).ready(function(){});
2. jquery 选择器常用多练:#id .class > + ~;
3. 过滤选择器 :eq :gt :lt
4. 常用属性 html()//设置或获取标签 val()//设置或获取文本框的值 attr()//获取或设置元素的属性 text()//文本 addClass() removeClass() toggleClass()//如果存在（不存在）就删除（添加）一个类。
5. 事件绑定 .on(“click”,function(){}) 解绑 .off()
6. jQuery ajax语法

    var menuId = $( "ul.nav" ).first().attr( "id" );
    //first()筛选器 选择ul .nav下的第一个元素
    //attr()属性 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
    var request = $.ajax({
      url: "script.php",
      method: "POST",
      data: { id : menuId },
      dataType: "html"
    });
     
    request.done(function( msg ) {
      $( "#log" ).html( msg );//html元素
    });
     
    request.fail(function( jqXHR, textStatus ) {
      alert( "Request failed: " + textStatus );
    });

php文件：

    <?php 
        $tag = "<p>测试</p>";
        echo $tag;
    ?>
    html文件：
    <ul>
        <li class="nav"><div id="div1"> <span>略略略</span></div></li>
        <li></li>
        <li></li>
    </ul>
    <div id = "log"> </div>

跳转页面

    $("#login").on('click',function(){
                window.location.href = "./register.html";
            });

jsonp 与script标签实现跨域

    <script>
        window.onload = function(){
            function cb(data){
                console.log(data);
            }

             $.ajax({
                url:"../register.php",
                dataType: "jsonp",
                jsonp:"_jsonp",
                jsonpCallback:"cb",
                type: "post",
               
                success:function(json){
                    console.log(json);
                },
                error:function(){}


            });
        }
    </script>
    <script src="jsonp.php?_jsonp=cb"></script>   

• php文件：

    <?php 
$callback = $_GET['_jsonp'];

$arr = array("Chris","Lee","李三岁");


echo $callback."(".json_encode($arr).")";

 ?>

artTemplate 使用

• html文件：

    <script src="template.js"></script> 
    <script id="artid" type="text/hmtl">
    {{if longitude}}
        <ul>
            <li>经度:{{longitude}}</li>
            <li>维度:{{latitude}}</li>
            <li>海拔高度:{{altitude}}</li>
            <li>天气:{{weather}}</li>
            <li>温度:{{temp}}</li>
            <li>最低温度:{{l_tmp}}</li>
            <li>最高温度:{{h_tmp}}</li>
            <li>风向:{{WD}}</li>
            <li>风速:{{WS}}</li>
            <li>日出时间:{{sunrise}}</li>
            <li>日落时间:{{sunset}}</li>
        </ul>
    {{/if}}
    </script>

    success : function(data){
                <!-- var tag = ' {{if longitude}}' -->
                    <!-- +'<ul>' -->
                        <!-- +'<li>经度:{{longitude}}</li>' -->
                        <!-- +'<li>维度:{{latitude}}</li>' -->
                        <!-- +'<li>海拔高度:{{altitude}}</li>' -->
                        <!-- +'<li>天气:{{weather}}</li>' -->
                        <!-- +'<li>温度:{{temp}}</li>' -->
                        <!-- +'<li>最低温度:{{l_tmp}}</li>' -->
                        <!-- +'<li>最高温度:{{h_tmp}}</li>' -->
                        <!-- +'<li>风向:{{WD}}</li>' -->
                        <!-- +'<li>风速:{{WS}}</li>' -->
                        <!-- +'<li>日出时间:{{sunrise}}</li>' -->
                        <!-- +'<li>日落时间:{{sunset}}</li>' -->
                    <!-- +'</ul>' -->
                    <!-- +'{{/if}}'; -->
                    <!-- var render = template.compile(tag); -->
                    <!-- var html = render(data.retData); -->
                    <!-- $('#weaInfo').html(html); -->


                 var html = template('artid', data.retData);
                 $('#weaInfo').html(html);
            }

• 模板的使用便于维护 变更改掉id就行了

    <script id="artid" type="text/html">
    {{if weather}}
        {{each weather as value}}
            <div>
            <span>日期：{{value.date}}</span>
            <ul>
                <li>白天天气：{{value.info.day[1]}}</li>
                <li>白天温度：{{value.info.day[2]}}</li>
                <li>白天风向：{{value.info.day[3]}}</li>
                <li>白天风速：{{value.info.day[4]}}</li>
            </ul>
            <ul>
                <li>夜间天气：{{value.info.night[1]}}</li>
                <li>夜间温度：{{value.info.night[2]}}</li>
                <li>夜间风向：{{value.info.night[3]}}</li>
                <li>夜间风速：{{value.info.night[4]}}</li>
            </ul>
            </div>
        {{/each}}
    {{/if}}

jQuery 插件及扩展

• 全局jQuery函数扩展方法

    $.函数名 = function (arg) {}
     $.log = function() {
        //代码
     }
     $.log();
     //$("li")//普通jQuery对象

• jQuery对象扩展方法

  $.fn.函数名 = function(){}//相当于在原型上绑定
 $.fn.log = function() {
     return "<div></div>";
 }
 $("div").log();

• jQuery.data() jQuery对象的数据缓存。(了解)

     $(".nav").data("name", 123);//设置值。添加属性等
      var t  = $(".nav").data("name"); //获取值
      t.name = "18";//对象的更改，会直接同步到 元素的jQuery对象上去。这里的值也会更改到上面的name属性中
     例子 京东商城的侧边栏展示     
    在li中点击项添加额外的属性当做判断标志

• $().data()

	例如：
	$("li").click(function(){
	    $(this).data("clicked",true);
	});
	//当前li点击之后添加值，然后获取这个clicked属性，如果是true，就知道被选中了。
	if( $(this).data("clicked")===true){}

• 第三方插件
  1. 背景色动画插件
  2. lazyload 插件
  3. jQuery UI 插件

兼容问题

• 文本节点

	    function getNodeText(node){
	        if(window.ActiveXObject){//IE
	           return node.text;
	       }else{//非IE
	           if(node.nodeType == 1  ){//=1 是元素名；=3 只有文本
	           return node.textContent;    //得到节点里的文本内容，覆写，不支持标签写入
	           }
	       }
	   }

• XMLreq兼容

        if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }