jsonp跨域請(qǐng)求實(shí)現(xiàn)示例

更新時(shí)間：2017年03月13日 09:15:35 作者：tapt

本文主要介紹了jsonp跨域請(qǐng)求實(shí)現(xiàn)示例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

網(wǎng)上看了很多關(guān)于jsonp的資料，發(fā)現(xiàn)在本機(jī)運(yùn)行后實(shí)現(xiàn)不了，有的是有錯(cuò)漏，有的是說(shuō)的比較含糊，接合自己的情況，整了一個(gè)可運(yùn)行的示例；

前言：

ajax請(qǐng)求地址：http://192.168.1.102:8080/carop/jsonp

服務(wù)端要返回的jsonp字符串：jsonpCallback({"name":"劉德華"，"電話":"17688888888"})

jsonp寫法，寫法上可以理解成一個(gè)javascript函數(shù)的執(zhí)行，例如alert("hello world")會(huì)彈出hello world的窗口，再例如alert({"name":"劉德華"})會(huì)彈出[object Object]的窗口。(注意這里參數(shù)兩端沒(méi)加雙引號(hào)，它是一個(gè)有屬性的對(duì)象而不是一個(gè)字符串)

那么本示例的jsonp中，可以將jsonpCallback理解成函數(shù)名，{"name":"劉德華"，"電話":"17688888888"}這個(gè)對(duì)象是這個(gè)函數(shù)執(zhí)行時(shí)所要傳遞的參數(shù)。

客戶端：

$.ajax({
       type: "get",
       async:false,
url: "http://192.168.1.102:8080/carop/jsonp",
       dataType: "jsonp",
jsonpCallback:"jsonpCallback",       
       success: function(data){
       alert(data.name+"\n "+data.tel);
       }
     });

其他的ajax方法比如getjson亦可，寫法上有區(qū)別，這里僅采用一種方法。

說(shuō)明：jsonpCallback:"jsonpCallback",前一個(gè)ajax參數(shù)表示要執(zhí)行的函數(shù)，后面的”jsonpCallback“，這個(gè)是服務(wù)器返回jsonp的javascript函數(shù)名。（網(wǎng)上有相關(guān)資料這個(gè)參數(shù)寫的是jsonp而不是jsonpCallback，經(jīng)實(shí)際測(cè)試要寫成jsonpCallback，jquery版本1.8，所測(cè)試瀏覽器為火狐和edge）

服務(wù)端

servlet控制器層直接返回jsonp；

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/jsonp")
public class jsonp extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
 resp.setCharacterEncoding("UTF-8");
 //System.out.println("進(jìn)入jsonp");
 resp.setContentType("text/json;charset=utf-8");
 String json="{\"name\":\"劉德華\",\"tel\":\"17688888888\"}";
 String jsonp="jsonpCallback("+json+")";
 PrintWriter pw=resp.getWriter();
 System.out.println(jsonp);
 pw.print(jsonp);
}
@Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // TODO Auto-generated method stub
 doGet(req, resp);
 }
}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: