Hybrid App开发之Ajax在JQuery中的应用
Posted 总李写代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Hybrid App开发之Ajax在JQuery中的应用相关的知识，希望对你有一定的参考价值。
前言：
今天学习一下如何通过Ajax与服务器进行交互，并且学习一下如何在JQuery中使用。
首先先了解一下什么是ajax？
AJAX即“Asynchronous，javascript+XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX=异步JavaScript和XML（标准通用标记语言的子集）。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页面。
1、）先看下没有使用jQuery的时候，JavaScript如何通过ajax发送请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function，有一个参数，参数就是服务器返回的报文体 function ajax(url, method, parmars, successFunc) { parmars = (function (obj) { // 转成post需要的字符串. var str = ""; var pos = 0; for (var prop in obj) { str += prop + "=" + obj[prop]; if (pos > 0) { str += "&" } pos++; } return str; })(parmars); var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0"); //我这里声明1是post 0是get if (method === 0) { url = url + ‘?‘ + parmars; } //第一个参数是请求方式 第二个是请求地址 第三个参数：同步方式 or 异步方式，一般置为true，为异步；默认也为异步调用 request.open(method === 1 ? "POST" : "GET", url, true); //设置请求头 request.setRequestHeader("version", ‘v1.2.0‘); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.onreadystatechange = function () { alert(url); if (request.readyState === 4) { if (request.status === 200) { var data = JSON.parse(request.responseText);//将返回的数据放在data变量中 if (data.success) { successFunc(data); } else { alert("解析错误"); } } else { alert("服务器返回错误" + request.readyState + request.status+request.responseText); } } }; if (method === 1) { request.send(parmars); } else { request.send(); } } function getWeather() { var url = ‘http://wthrcdn.etouch.cn/weather_mini‘; var parmars = { "citykey": 101010100 }; ajax(url, 0, parmars, function (xmlDataString) { alert(xmlDataString) }); } </script> </head> <body> <div> <input type="button" value="获取天气情况" id="getWeatherBtn" onclick="getWeather()"> </div> </body> </html>
上面就是一个常规的ajax请求，可惜实际运行中给了我当头一棒，那就是ajax跨域问题，接下来尝试这使用jsonp解决跨域问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function ajax(params) { params = params || {}; params.data = params.data || {}; var json = params.jsonp ? jsonp(params) : json(params); // ajax请求 function json(params) { params.type = (params.type || ‘GET‘).toUpperCase(); params.data = formatParams(params.data); var xhr = null; // 实例化XMLHttpRequest对象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE6及其以下版本 xhr = new ActiveXObjcet(‘Microsoft.XMLHTTP‘); } // 监听事件 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { var response = ‘‘; var type = xhr.getResponseHeader(‘Content-type‘); if (type.indexOf(‘xml‘) !== -1 && xhr.responseXML) { response = xhr.responseXML; //Document对象响应 } else if (type === ‘application/json‘) { response = JSON.parse(xhr.responseText); //JSON响应 } else { response = xhr.responseText; //字符串响应 } ; params.reqSuccess && params.reqSuccess(response); } else { params.error && params.error(status); } } }; // 连接和传输数据 if (params.type == ‘GET‘) { xhr.open(params.type, params.url + ‘?‘ + params.data, true); xhr.send(null); } else { xhr.open(params.type, params.url, true); //设置提交时的内容类型 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset=UTF-8‘); xhr.send(params.data); } } // jsonp请求 function jsonp(params) { //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getElementsByTagName(‘head‘)[0]; // 设置传递给后台的回调参数名 params.data[‘callback‘] = callbackName; var data = formatParams(params.data); var script = document.createElement(‘script‘); head.appendChild(script); //创建jsonp回调函数 window[callbackName] = function (json) { head.removeChild(script); clearTimeout(script.timer); window[callbackName] = null; params.reqSuccess && params.reqSuccess(json); }; //发送请求 script.src = params.url + ‘?‘ + data; //超时处理 if (params.time) { script.timer = setTimeout(function () { window[callbackName] = null; head.removeChild(script); params.error && params.error({ message: ‘超时‘ }); }, time); } }; //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + ‘=‘ + encodeURIComponent(data[name])); } // 添加一个随机数，防止缓存 arr.push(‘v=‘ + random()); return arr.join(‘&‘); } // 获取随机数 function random() { return Math.floor(Math.random() * 10000 + 500); } } function reqWeather() { ajax({ url: ‘http://wthrcdn.etouch.cn/weather_mini‘, jsonp: ‘jsonpCallback‘, data: {‘citykey‘: 101010100}, reqSuccess: function (res) { alert(JSON.stringify(res)) } }) } </script> </head> <body> <div> <input type="button" value="获取天气情况" onclick="reqWeather()"> </div> </body> </html>
2、）JQuery与Ajax结合使用
（1）get()、getJSON()请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { $("#getWeatherBtn").click(function () { var url = ‘http://wthrcdn.etouch.cn/weather_mini‘; var parmars = { "citykey": 101010100 }; //get请求 $.get(url + "?citykey=101010100", function (data) { alert(JSON.stringify(data)) }); //get请求 返回json $.getJSON(url, parmars, function (data) { alert(JSON.stringify(data)) }) }); }); </script> </head> <body> <div> <input type="button" value="获取天气情况" id="getWeatherBtn"> </div> </body> </html>
(2)post请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { $("#getWeatherBtn").click(function () { url = ‘http://api.k780.com:88/‘; parmars = { ‘app‘: ‘weather.today‘, ‘weaid‘: 1, ‘appkey‘: 10003, ‘sign‘: ‘b59bc3ef6191eb9f747dd4e83c99f2a4‘, ‘format‘: ‘json‘, ‘jsoncallback‘: "data", ‘callback‘: "data" }; $.get(url, parmars, function (data) { alert(data); alert(JSON.stringify(data)) }); $.post(url, parmars, function (data) { alert(data); alert(JSON.stringify(data)) }); }); }); </script> </head> <body> <div> <input type="button" value="获取天气情况" id="getWeatherBtn"> </div> </body> </html>
（3）ajax()方式请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { $("#getWeatherBtn").click(function () { url = ‘http://api.k780.com:88/‘; parmars = { ‘app‘: ‘weather.today‘, ‘weaid‘: 1, ‘appkey‘: 10003, ‘sign‘: ‘b59bc3ef6191eb9f747dd4e83c99f2a4‘, ‘format‘: ‘json‘, ‘jsoncallback‘: "data", ‘callback‘: "data" }; $.ajax({ type: "get", async: true, url: url, //跨域请求的URL dataType: "jsonp", data: parmars, //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback) jsonp: "jsoncallback", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 jsonpCallback: "data", //成功获取跨域服务器上的json数据后,会动态执行这个callback函数 success: function (data) { alert(JSON.stringify(data)); } }); $.ajax({ type: "post", async: true, url: url, //跨域请求的URL dataType: "jsonp", data: parmars, //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback) jsonp: "jsoncallback", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 jsonpCallback: "data", //成功获取跨域服务器上的json数据后,会动态执行这个callback函数 success: function (data) { alert(JSON.stringify(data)); } }); }); }); </script> </head> <body> <div> <input type="button" value="获取天气情况" id="getWeatherBtn"> </div> </body> </html>
（4） ajaxSetUp()设置全局ajax
$.ajaxSetup({
dataType: "jsonp",
async: true,
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback: "data",
});
总结：
今天大致学习了JQuery的ajax使用，后续开始学习与Css3、Html5、React.js、React Native,s最终是为开发RN做准备。
以上是关于Hybrid App开发之Ajax在JQuery中的应用的主要内容，如果未能解决你的问题，请参考以下文章