外部 php 代码：
<?php $city = $_GET["city"]; $callback = $_GET["callback"]; if($city == "beijing") { echo $callback . "(\'获取到北京天气\')"; } else { echo $callback . "(\'为获取到天气信息\')"; } ?>之后，再看我们在 script 里面写的 foo 函数的定义，会不会觉得很突兀？我们把它改成 window 的方法就可以了。
window["foo"] = function(data) { console.log(data); };然后把它放到按钮的点击事件中，这样就和按钮的点击事件融为一体了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>天气查询</h1><br> <input type="text" placeholder="请输入城市"><br> <input type="button" value="获取天气"> <script> document.getElementById("btn").onclick = function () { window["foo"] = function(data) { console.log(data); }; var city = document.getElementById("txt").value; var script = document.createElement("script"); script.src = "http://hr.pcebg.efoxconn.com/checkUsername.php?city=" + city + "&callback=foo"; document.getElementsByTagName("head")[0].appendChild(script); }; </script> </body> </html>在修改回调函数的名称时，只需修改两个部分就可以了（window["foo"] 和 "&callback=foo";），php 的代码不需要修改。
2、案例：淘宝提示词淘宝提示词接口
地址 https://suggest.taobao.com/sug作用描述 获取淘宝提示词接口
请求类型 get 请求
参数 q：关键词； callback：回调函数名称
返回数据格式 jsonp格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <h1>淘宝提示词</h1> <input type="text" placeholder="请输入关键词"> <input type="button" value="查询"> <ul></ul> </div> <script> document.getElementById("btn").onclick = function () { var script = document.createElement("script"); var txt = document.getElementById("txt").value; script.src = "https://suggest.taobao.com/sug?q="+txt+"&callback=sug"; window["sug"] = function (data) { var str = ""; if(data.result.length !== 0) { for (var i = 0; i < data.result.length; i++) { str += "<li>"+data.result[i]+"</li>"; } document.getElementById("uu").innerHTML = str; } else { str = "<li>未找到关键词</li>"; document.getElementById("uu").innerHTML = str; } }; document.querySelector("head").appendChild(script); }; </script> </body> </html> 3、案例：百度提示词
百度提示词接口
地址作用描述 获取百度提示词接口
请求类型 get 请求
参数 wd：关键词； cb：回调函数名称
返回数据格式 jsonp格式
PS：与淘宝提示词代码相同，只需要修改地址、参数即可。
我们从之前的 Ajax 的代码知道，这样的代码太过于冗余，我们需要对代码进行封装。
我们将实现的代码封装成一个 js 文件。
//my-sug.js 文件 function myAjaxCross(obj) { var defaults = { url: "#", //地址 data: {}, // 业务逻辑参数 ，比如：wd=web&pwd=123 success: function (data) {}, // 参数传递回来的处理函数 jsonp: "callback", // 获取方法名的key值。是一个回调函数，由后端接口文档指定 jsonpCallback: "sug" // 获取方法名的value值，也就是方法名字 }; // 由 obj 传入的对象覆盖 defaults for (var key in obj) { defaults[key] = obj[key]; } var script = document.createElement("script"); // 将 data 里面的参数拼接到 url 后面 var params = ""; for (var attr in defaults.data) { params += attr + "=" + defaults.data[attr] + "&"; } // 去掉最后多出来的 & 符号 if (params && (params !== "")) { params = params.substring(0, params.length - 1); } // 再在地址后面拼接回调函数 script.src = defaults.url + "?" + params + "&" + defaults.jsonp + "=" + defaults.jsonpCallback; console.log(script.src); // 对回调函数进行定义，将参数传入自己定义的处理数据函数中 window[defaults.jsonpCallback] = function (data) { defaults.success(data); }; document.querySelector("head").appendChild(script); }