ajax and cross-domain jsonp-JS Tutorial-php.cn

ajax and cross-domain jsonp

php中世界最好的语言

Release： 2018-04-17 14:14:09

Original

1387 people have browsed it

This time I will bring you ajax and cross-domain jsonp. What are the precautions for ajax and cross-domain jsonp? The following is a practical case, let’s take a look.

nbsp;html>


  <meta>
  <title>Title</title>
  <script>
    window.onload =function(){
      var oBtn = document.getElementById(&#39;btn&#39;);
      oBtn.onclick = function(){
        //创建XHR对象
        var xhr = new XMLHttpRequest();
        //请求的方式，地址，是否异步
        xhr.open(&#39;get&#39;,&#39;test.txt&#39;,true);
        //请求的确定操作，初始化，相当于搜索时，敲击的回车
        xhr.send(null);
        //请求的readyState每变化一次就执行一次onreadystatechange函数
        //其中readyState表示的是：请求/响应过程的当前活动阶段
        //readyState有如下取值
        /*
        *  0：未初始化，尚未调用send()方法
        *  1: 启动
        *  2：发送
        *  3：接收
        *  4：完成
        */
        xhr.onreadystatechange =function(){
          if(xhr.readyState ==4){
            alert(xhr.responseText);
          }
        }
      };
    };
  </script>


<input>

Copy after login

The execution effect is as follows. Clicking show will request the local .txt file through ajax.

ajax and cross-domain jsonp

The code is relatively simple and with comments, I believe it will be easy to understand.

But at work, we often request resources in other domains (because of the same-origin policy). At this time, we encounter cross-domain (any difference in protocol, port, and domain name is considered cross-domain).

A common way to solve cross-domain problems is jsonp. Although it has limitations (only supports get requests), its advantage is that it is compatible with old browsers (but few people seem to care about old browsers now).

The basic principle of jsonp is to dynamically create script tags. The src of the script tag has no cross-domain restrictions.

Next, go to a page similar to Baidu search drop-down

nbsp;html>


  <meta>
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      width:300px;
      height:30px;
      border:1px solid lightgray;
      margin-top: 150px;
      margin-left: 200px;
      padding-left: 5px;
    }
    ul{
      width:307px;
      list-style: none;
      margin-left: 200px;
      display: none;
    }
    li{
      height:30px;
      border: 1px solid lightgray;
      line-height: 30px;
      padding-left: 5px;
    }
  </style>
  <script>
    function callbackD(response){
      var oUl = document.getElementById(&#39;ulList&#39;);
      var html=&#39;&#39;;
      if(response.s.length !=0){
        oUl.style.display=&#39;block&#39;;
        for(var i = 0;i<response.s.length;i++){
          html+=&#39;<li>&#39;+response.s[i]+&#39;&#39;
        }
      }
      oUl.innerHTML = html;
    }
  </script>
  <script>
    window.onload = function(){
      //获取dom元素
      var oData = document.getElementById(&#39;inputSearch&#39;);
      var oUl = document.getElementById(&#39;ulList&#39;);
      //键盘按下后抬起触发事件(onkeyup)
      oData.onkeyup = function(){
        if(oData.value != &#39;&#39;){
          //创建标签(createElement)
          var script = document.createElement("script");
          //添加地址
          script.src=&#39;http://unionsug.baidu.com/su?wd=&#39;+this.value+&#39;&p=3&cb=callbackD&#39;;
          //添加给body的(成为body包涵的孩子)
          document.body.appendChild(script);
        }else{
          oUl.style.display=&#39;none&#39;;
        }
      }
    };
  </script>


<input>

Copy after login

The code is also relatively simple. With the comments of the code, it must be easy to understand. This is a common way to solve cross-domain problems. x Others include reverse proxy, CORS, etc. I will sort them out after I learn them.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!