Summary of how to use Ajax and jsonp

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. This article will lead you to learn how to use Ajax and jsonp, so we have made a summary of how to use Ajax and jsonp to share with you. Friends who need it can refer to it. We hope it can help everyone.

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, the default is 'GET', commonly used 'POST'
•dataType: Set the returned data format, generally use json, or html and jsonp;
•data: Set the data sent to the server
•.done(): Set the callback function after the request is successful
•.fail(): Set the callback function after the request fails
•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('服务器超时，请重试！');
    });
  });
})
......

  <p>
    <input>
  </p>

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

2. $.get():

•$.get() method uses 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, 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: The data type of the request response.

//参考代码：
$(function () {
  $("input").click(function () {
    $.get(
      "./data.json",
      function (data,status) {
        console.log(data.name);
      },
      "json"
    );
  });
})
......

  <p>
    <input>
  </p>

•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 data from the server;
• The method used is exactly the same as the $.get() method.

4. $.load():

•Load data from the server, there is no need to specify the datatype, and the returned data will be automatically returned. Place it in the element.
•Parameters:

•URL: address;
•data: request parameters, optional;
•function(response, status, xhr): request successful The callback function.

$(function () {
  $("input").click(function () {
    $(".box").load(
      "./data.json",
      function (response,status) {
        console.log(data.name);
      }
    );
  });
})
......

  <p>
    <input>
    </p><p></p>
  

•The returned data will be placed in p;
•The data cannot be accessed across domains;
•response is the returned data and status is the status of the request;
•No callback function for request failure

4. getJSON()

•Method uses AJAX HTTP GET request to obtain 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);
      },
    );
  });
})
......

  <p>
    <input>
  </p>

•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);
      },
    );
  });
})
......

  <p>
    <input>
  </p>

•The return result data is js code;

•This method can be used to dynamically load js code

2.jsonp#.

##•Definition: A data communication format that can be used to send http requests across domains, which can be embedded in ajax.

•Principle: Use script tags to link resources across domains.

Usage 1: Function parameter passing

<script>
  function aa(data){
    console.log(data.name);
  }
</script>
<script></script>

Instructions: Define a data.js file externally. The path of this file may not be in the same domain as the current page.

data.js. Content:

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

• Pass the data in the form of parameters of the function defined on the page to obtain the data.

•Essentially, the data can be split so that the data is not forced to be stored under the same domain name.

Usage 2: Using ajax

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

•The content of data.js is the same as above.

•The method of using ajax is essentially a script tag that can link resources across domains, but jquery encapsulates the same method and looks the same.

•The execution process of the above code is: ajax accesses the data.js file across domains through jsonp technology, and executes the .done method by finding the aa() method and passing its parameters to the data parameter of the .done method.

•At present, this method still has its limitations, that is, you must know the name of the data.js file and the defined method aa. If you only know the domain name, another method is needed.

Usage Three

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('服务器超时，请重试！');
  });
})
....

  <input>

•View the data packet sent back by the server each time you enter a keyword through the browser, find the address of the header in the js file and the related submission data, and find that the key is the word keyword, so you can Send data to the server.

•The data returned by the server will be automatically passed to the parameter data of the anonymous function of the callback.

Related recommendations:

How to implement AJAX and JSONP in native JS

The difference and usage between json and jsonp

Use of ajax and jsonp in javascript Detailed explanation of skill code

The above is the detailed content of Summary of how to use Ajax and jsonp. For more information, please follow other related articles on the PHP Chinese website!