模拟搜索jsonp跨域案例以及js动态创建元素总结

一、模拟搜索jsonp跨域案例

jsonp 跨域原理：XMLHttpRequest不能发生跨域请求，但是可以通过script标签去发生请求。

原生js 处理：动态生成script标签，并且把src 属性设置为我们需要访问的跨域的地址

jQuery AJAX处理：只需把dataType：“jsonp”，（底层原理，这个属性一设置，$.ajax就没有使用XMLHttpRequest这个对象，而是使用了script标签）

问题：如果用script标签去发送请求，怎么接收浏览器返回的数据。

客户端浏览器会直接以js 的方式去解析服务器端返回的数据

原生js 处理：

 var script=document.createElement("script");
    script.src="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+words;
    document.body.appendChild(script);

 1、客户端给服务器端传递一个回调函数，在客户端先提前定义好这个函数，上述代码中函数名为getInfo;

2、服务器端返回的是一个回调函数的调用，并且将服务端要返回给客户端的数据包含在函数参数中。

大概意思如下

$callback=$_GET["callback"];//callback在这里就是getInfo
echo $callback({"username":"zhangsan","age":11});//{}里是给客户端返回的数据

jQuery AJAX处理

$.ajax({
                      type: "get",
                      url: "http://api.jisuapi.com/shouji/query",
                      data: "appkey=7ca5f245254f2b88&shouji="+telephone,
                      success: function(msg){
                             alert(msg);
                      }
                  });

返回的数据就是msg;

案例一：原生js获取360搜狐数据

 function getInfo(data){
              console.log(data);
               var results=data.result;
               document.querySelector(".detail>ul").innerHTML="";
                for(var i=0;i<results.length;i++){
                     var li=document.createElement("li");
                     li.innerHTML=results[i].word;
                     document.querySelector(".detail>ul").appendChild(li);
                }

     }
    $(".keywords").keyup(function(){
    var words=this.value;
    console.log(words);
    if(words.length>0){
    var script=document.createElement("script");
    script.src="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+words;
    document.body.appendChild(script);
    $(".detail")[0].style.display="block";
    }else{
     $(".detail")[0].style.display="none";
    }
    })

 案例二：ajax 跨域获取grapy AIP的动态图

 $("input[type=button]").on("click",function(){
      var words=$(".keywords")[0].value;
      console.log(words);
      if(words.length>0){
          $.ajax({
             type:"get",
             url:"https://api.giphy.com/v1/gifs/search?api_key=3eFQvabDx69SMoOemSPiYfh9FY0nzO9x&q="+words+"&offset=0",
             success:function(msg){
                   console.log(msg);
            if(msg.meta.status==200){
               for(var i=0;i<msg.data.length-20;i++){
                var lis= document.createElement("li");
                var imgs=document.createElement("img");
                    imgs.src=msg.data[i].images.downsized_large.url;
                 lis.appendChild(imgs);
                   $(".detail ul")[0].appendChild(lis);
                   }

            }
             }
          })
           $(".detail")[0].style.display="block";
          }else{
     $(".detail")[0].style.display="none";
    }
     })

补充：

cors解决跨域，普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。只需在服务器端加上这一句代码：

header("Access-Control-Allow-Origin: * ");

二、js动态创建元素

1、利用innerHTML字符串拼接

var str=''; 
for(var i=0; i<30 ;i++){ 
var r = parseInt(Math.random()*100); //随机生成一个数字 
str += '<div>'+r+'</div>'; //拼接str 
} 
document.getElementById('container').innerHTML=str;

2、利用creatElement和appendChild

根据客户端返回数据的条目数，来动态增加元素，显示多条数据列表。

补充：appendChild小知识，只能添加节点，不能添加字符串。

错误：

var z = '<p>test satu dua tiga</p>'; // is a string 
document.body.appendChild(z);

正确：

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);