Home >Web Front-end >JS Tutorial >Detailed explanation of the use of ajax and jsonp

Detailed explanation of the use of ajax and jsonp

php中世界最好的语言Original: 2018-04-17 14:43:301828browse

This time I will bring you a detailed explanation of the use of ajax and jsonp. What are the precautions when using ajax and jsonp. The following is a practical case, let's take a look.

Foreword: ajax and jsonp can communicate with the background to obtain data and information, but do not need to refresh the entire page to achieve partial refresh of the page.

1. ajax

•Definition: A technology that sends http requests to communicate asynchronously with the background.

•Principle: Instantiate the xmlhttp object and use this object to communicate with the background.

Same-origin policy for ajax:

•The pages or resources requested by Ajax can only be resources in the same domain and cannot be resources in other domains. This is based on security considerations when designing Ajax.

-------------------------------------------------- ----------------------------------

ajax method:

1. $.ajax({}):

•Common parameters: •url: request network address
•type: request method, the default is 'GET', commonly used 'POST'
•dataType: set the returned data format, generally use json, can also be html and jsonp;
•data: Set the data sent to the server
•.done(): Set the callback function after the request is successful
•.fail(): Set the request after the request fails Callback function
•async: Set whether it is asynchronous. The default value is 'true', which means asynchronous

•Code usage:

$(function () {
  $("input").click(function () {
    $.ajax({
      url: "./data.json",
      type: "get",
      dataType: "json",
    });
    .done(function(data) {//请求成功的回调函数
      $("input").val(dat.name);
    })
    .fail(function() {
      alert('服务器超时，请重试！');
    });
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

Note: data represents the data returned by the background; the use of ajax depends on the server environment.

2. $.get():

•The $.get() method uses a GET request to load data from the server; it is also an ajax method for requesting data without refreshing.

•Parameters:
•url: The URL to be accessed must follow the same-origin policy;
•data: The data sent to the server.
•function(data,status){}: Request the function to run successfully
•dataType: Request the data type of the response.

//参考代码：
$(function () {
  $("input").click(function () {
    $.get(
      "./data.json",
      function (data,status) {
        console.log(data.name);
      },
      "json"
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•The parameters of the $.get() method are different from those of $.ajax(). The URL is a required parameter, and the other three are optional.
•Data is the returned data, status indicates the status of the request, generally including ""success", "error", "timeout", etc.
•If the datatype is jsonp, you can also request data across domains .
•No callback function for request failure.

3. $.post()

•The $.get() method uses a POST request to load data from the server;

•The method used is exactly the same as the $.get() method.

4. $.load():

•Load data from the server, no need to specify datatype, the returned data will be automatically placed into the element.

•parameter:

•URL: address;

•data: request parameters, optional;

•function(response, status, xhr): callback function for successful request.

$(function () {
  $("input").click(function () {
    $(".box").load(
      "./data.json",
      function (response,status) {
        console.log(data.name);
      }
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
    <p class="box"></p>
  </p>
</body>

•The returned data will be placed in p; •Data cannot be accessed across domains;

•response is the returned data, and status is the status of the request;
•There is no callback function for request failure.

4. getJSON()

•Method uses AJAX HTTP GET request to get JSON data.

•Parameters:

•url: request URL, required parameters;
•data: data sent to the server;
•function(data,status,xhr): callback function for successful request

$(function () {
  $("input").click(function () {
    $.getJSON(
      "./data.json",
      function(data,status) {
        console.log(data.name);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•The method directly obtains json data;

•No callback function that returns failure;

•The callback function is a named function, not an

anonymous function

;

5. getScript()

•Method uses AJAX HTTP GET request to obtain and execute js code.

•Parameters:

•url: request URL, required parameters;

•function(data,status): callback function for successful request

$(function () {
  $("input").click(function () {
    $.getScript(
      "./data.js",
      function(data,status) {
        console.log(data);
      },
    );
  });
})
......
<body>
  <p>
    <input type="button" value="xinzhi">
  </p>
</body>

•The return result data is js code;

•This method can be used to dynamically load js code.

2.jsonp

•定义：一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。
•原理：利用script标签可以跨域链接资源的特性。

用法一：函数传参

<script type="text/javascript">
  function aa(data){
    console.log(data.name);
  }
</script>
<script type="text/javascript" src="....../data.js"></script>

说明：在外部定义一个data.js文件，这个文件的路径可以与当前页面不在同一个域下面。

data.js的内容：

aa({
  
  "data":{
    "name":"xiaohong",
    "age":"18"
  }
})

•将数据以页面定义的函数的参数的形式传递进去，从而获取数据。

•本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。

用法二：利用ajax

$.ajax({
  url:'...../data.js',//可以不是本地域名 
  type:'get',
  dataType:'jsonp', //jsonp格式访问
  jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
  console.log(data.name);
})
.fail(function() {
  alert('服务器超时，请重试！');
});

•data.js的内容和上面一样。

•使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。

•以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。

•目前这种方式仍然有其局限性，就是必须知道data.js文件的名字和定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.

用法三

var $input = $("input");
$input.keyup(function () {
  $.ajax({
    url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
    type:'get',
    dataType:'jsonp', //jsonp格式访问
    data: {word: $input.val()},
  })
  .done(function(data){
    console.log(data);
  })
  .fail(function() {
    alert('服务器超时，请重试！');
  });
})
....
<body>
  <input type="text">
</body>

•通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
•服务器返回的数据会自动传给回调的匿名函数的参数data.

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Detailed explanation of the use of ajax and jsonp

Related articles