Home > Article > Web Front-end > About how to use ajax and jsonp

About how to use ajax and jsonp

零到壹度Original: 2018-03-29 10:35:591270browse

This article mainly shares with you an article about the use of ajax and jsonp. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.

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 pages or resources requested by Ajax can only be resources under the same domain, not other domains. Resources, 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, or 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 to be 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(&#39;服务器超时，请重试！&#39;);
        });
    });
})

......
<body>    <p>
        <input type="button" value="xinzhi">
    </p></body>

Explanation: 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 an ajax method for requesting data without refreshing. method.
Parameters:

url: The URL to be accessed needs to follow the same-origin policy;
data: 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"
        );
    
    });
})

......
<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. select.
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.
##There is no callback function for request failure.

##Load data from the server, no need to specify datatype, return The data will be automatically placed into the element.

## Parameters:
#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>

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

url: Request URL, required parameters;
data: Data sent to the server;

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

##Parameters:

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

Definition: A data communication format that can send http requests across domains and can be embedded in ajax.
Principle: The script tag can be used to link resources across domains.

Usage 1: Function parameter passing

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

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

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

将数据以页面定义的函数的参数的形式传递进去，从而获取数据。
本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。

用法二：利用ajax

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

data.js的内容和上面一样。
使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。
以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。
目前这种方式仍然有其局限性，就是必须知道data.js文件的名字和定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.

用法三

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

....
<body>
    <input type="text">
</body>

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

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

json jquery ajax html 数据类型封装 Error 回调函数 JS function 对象异步 http word

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement true paging in Vue.jsNext article：How to implement true paging in Vue.js

See more