下面以百度提示词为例，使用这个封装好的 js 文件。
<!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 src="http://www.likecs.com/my-sug.js"></script> <script> document.getElementById("btn").onclick = function () { myAjaxCross({ url: "http://suggestion.baidu.com/su", data: {wd:document.getElementById("txt").value}, success: function (data) { console.log(data); var str = ""; if(data.s.length !== 0) { for (var i = 0; i < data.s.length; i++) { str += "<li>"+data.s[i]+"</li>"; } document.getElementById("uu").innerHTML = str; } else { str = "<li>未找到关键词</li>"; document.getElementById("uu").innerHTML = str; } }, jsonp: "cb", jsonpCallback: "sug" }); }; </script> </body> </html> 4、使用 jQuery 获取跨域数据类似 jQuery 封装好了 Ajax 一样，jQuery 也对跨域数据的获取进行了封装，调用方法跟 Ajax 一模一样。
我们还是以百度提示词举例，使用 jQuery 来获取数据。
$.ajax({ url: "http://suggestion.baidu.com/su", data: {wd: document.getElementById("txt").value}, success: function (data) { console.log(data); var str = ""; if(data.s.length !== 0) { for (var i = 0; i < data.s.length; i++) { str += "<li>"+data.s[i]+"</li>"; } document.getElementById("uu").innerHTML = str; } else { str = "<li>未找到关键词</li>"; document.getElementById("uu").innerHTML = str; } }, dataType: "jsonp", // 重点 jsonp: "cb", // 根据需求指定，默认为：callback jsonpCallback: xxx // 可以省略 });1、dataType: "jsonp" 是重点，当 dataType 的类型为 jsonp 的时候，才能实现 jQuery 的跨域获取数据，否则只能使用同源策略。
2、jsonp: "cb" ：根据后端需求指定
3、jsonpCallback: xxx：可以不需要。
5、完善myAjax方法达到能获取同源数据和非同源数据主要借鉴了 jQuery 的处理方法，判断 dataType 的值。
//跨域数据obj dataType=jsonp function myAjax(obj){ if(obj.dataType == "jsonp") { myAjax4Across(obj); } else { myAjax4Normal(obj); } } function myAjax4Across(obj){ var defaults = { type:"get", url:"#", data:{}, success:function(data){}, jsonp:"callback", jsonpCallback:"hehe" }; for(var key in obj) { defaults[key] = obj[key]; } var params = ""; for(var attr in defaults.data){ params += attr + "=" + defaults.data[attr] + "&"; } if(params) { params = params.substring(0,params.length-1); defaults.url += "?" + params; } defaults.url += "&"+defaults.jsonp+"=" + defaults.jsonpCallback; console.log(defaults.url); var script = document.createElement("script"); script.src = defaults.url; window[defaults.jsonpCallback] = function(data){ defaults.success(data); }; var head = document.querySelector("head"); head.appendChild(script); } function myAjax4Normal(obj) { var defaults = { type:"get", url:"#", dataType:"json", data:{}, async:true, success:function(result){console.log(result);} }; //obj中的属性，覆盖到defaults中的属性 //1、如果有一些属性只存在obj中，会给defaults中增加属性 //2、如果有一些属性在obj和defaults中都存在，会将defaults中的默认值覆盖 //3、如果有一些属性只在defaults中存在，在obj中不存在，这时候defaults中将保留预定义的默认值 for(var key in obj){ defaults[key] = obj[key]; } var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //得到params // data:{ // uname:"zhangsan", // age:"18" // }// uname=zhangsan&age=18 var params = ""; for(var attr in defaults.data){ params += attr + "=" + defaults.data[attr] + "&"; } if(params) { params = params.substring(0,params.length - 1); } if(defaults.type == "get") { defaults.url += "?" + params; } xhr.open(defaults.type,defaults.url,defaults.async); if(defaults.type == "get") { xhr.send(null); } else if(defaults.type == "post") { xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(params); } if(defaults.async) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { if(xhr.status == 200) { var result = null; if(defaults.dataType == "json") { result = xhr.responseText; result = JSON.parse(result); } else if(defaults.dataType == "xml") { result = xhr.responseXML; } else { result = xhr.responseText; } defaults.success(result); } } }; } else { if(xhr.readyState == 4) { if(xhr.status == 200) { var result = null; if(defaults.dataType == "json") { result = xhr.responseText; result = JSON.parse(result); } else if(defaults.dataType == "xml") { result = xhr.responseXML; } else { result = xhr.responseText; } defaults.success(result); } } } } 6、模板引擎的使用