Home >Web Front-end >JS Tutorial >Practical summary of Ajax and jsonp in projects

Practical summary of Ajax and jsonp in projects

php中世界最好的语言Original: 2018-03-30 17:43:541649browse

This time I will bring you a practical summary of Ajax and jsonp in the project. What are the precautions when using Ajax and jsonp? Here are practical cases, 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 for asynchronous communication with the background.

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

Ajax’s same-origin policy:

•The page or resource requested by Ajax can only be a resource under the same domain, and cannot be a resource from other domains. This is based on security when designing Ajax. consider.

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

ajax method:

1. $.ajax({}):

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

•Code application:

$(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>

Description: data represents the data returned by the background; the use of ajax needs to depend on the server environment.

2. $.get():

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

•Parameters:

•url: The URL to be accessed, which needs to 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 $.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()

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

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

4. $.load():

•Load from the server. Data, there is no need to specify datatype, the returned data will be automatically placed in the element.

•Parameters:

•URL: address;

•data: Requested 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 returned. The data, status is the status of the request;
•There is no callback function for request failure.

4. getJSON()

•The method uses AJAX’s HTTP GET. Request to obtain JSON data.

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

$(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 return failed callback function;

•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>

•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中文网其它相关文章！

Practical summary of Ajax and jsonp in projects

Related articles