电子商务网站建设考试试卷,广州新一期lpr,北京理工大学网站开发与应用,教育网站建设 思维导图一. AJAX简介概念: AJAX(Asynchronous JavaScript And XML): 异步的JavaScript 和XMLAJAX作用:1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求#xff0c;并获取服务器响应的数据使用了AJAX和服务器进行通信#xff0c;就可以使用 HTMLAJAX来替换JSP页面了2.异步交互…一. AJAX简介概念: AJAX(Asynchronous JavaScript And XML): 异步的JavaScript 和XMLAJAX作用:1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求并获取服务器响应的数据使用了AJAX和服务器进行通信就可以使用 HTMLAJAX来替换JSP页面了2.异步交互:可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如:搜索联想、用户名是否可用校验等等...二. AJAX快速入门编写AjaxServlet, 并使用response输出字符串import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;WebServlet(/ajaxServlet)
public class AjaxServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.getWriter().write(Hello Ajax);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}创建XMLHttpRequest对象: 用于和服务器交换数据//创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();} else {// code for IE6, IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);}向服务器发送请求//发送请求xhttp.open(GET, http://localhost:8080/ajax-demo/ajaxServlet);xhttp.send();获取服务器响应数据xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {document.getElementById(demo).innerHTML alert(this.responseText)}
};效果展示三. Axios快速入门引入Axios的js文件/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */
!function(e,t){objecttypeof exportsobjecttypeof module?module.exportst():functiontypeof definedefine.amd?define([],t):objecttypeof exports?exports.axiost():e.axiost()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var on[r]{exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded!0,o.exports}var n{};return t.me,t.cn,t.p,t(0)}([function(e,t,n){e.exportsn(1)},function(e,t,n){use strict;function r(e){var tnew s(e),ni(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var on(2),in(3),sn(5),un(6),ar(u);a.Axioss,a.createfunction(e){return r(o.merge(u,e))},a.Canceln(23),a.CancelTokenn(24),a.isCanceln(20),a.allfunction(e){return Promise.all(e)},a.spreadn(25),e.exportsa,e.exports.defaulta},function(e,t,n){use strict;function r(e){return[object Array]R.call(e)}function o(e){return[object ArrayBuffer]R.call(e)}function i(e){returnundefined!typeof FormDatae instanceof FormData}function s(e){var t;return tundefined!typeof ArrayBufferArrayBuffer.isView?ArrayBuffer.isView(e):ee.buffere.buffer instanceof ArrayBuffer}function u(e){returnstringtypeof e}function a(e){returnnumbertypeof e}function c(e){returnundefinedtypeof e}function f(e){return null!eobjecttypeof e}function p(e){return[object Date]R.call(e)}function d(e){return[object File]R.call(e)}function l(e){return[object Blob]R.call(e)}function h(e){return[object Function]R.call(e)}function m(e){return f(e)h(e.pipe)}function y(e){returnundefined!typeof URLSearchParamse instanceof URLSearchParams}function w(e){return e.replace(/^\s*/,).replace(/\s*$/,)}function g(){return(undefinedtypeof navigator||ReactNative!navigator.product)(undefined!typeof windowundefined!typeof document)}function v(e,t){if(null!eundefined!typeof e)if(object!typeof e(e[e]),r(e))for(var n0,oe.length;no;n)t.call(null,e[n],n,e);else for(var i in e)Object.prototype.hasOwnProperty.call(e,i)t.call(null,e[i],i,e)}function x(){function e(e,n){objecttypeof t[n]objecttypeof e?t[n]x(t[n],e):t[n]e}for(var t{},n0,rarguments.length;nr;n)v(arguments[n],e);return t}function b(e,t,n){return v(t,function(t,r){nfunctiontypeof t?e[r]E(t,n):e[r]t}),e}var En(3),Cn(4),RObject.prototype.toString;e.exports{isArray:r,isArrayBuffer:o,isBuffer:C,isFormData:i,isArrayBufferView:s,isString:u,isNumber:a,isObject:f,isUndefined:c,isDate:p,isFile:d,isBlob:l,isFunction:h,isStream:m,isURLSearchParams:y,isStandardBrowserEnv:g,forEach:v,merge:x,extend:b,trim:w}},function(e,t){use strict;e.exportsfunction(e,t){return function(){for(var nnew Array(arguments.length),r0;rn.length;r)n[r]arguments[r];return e.apply(t,n)}}},function(e,t){function n(e){return!!e.constructorfunctiontypeof e.constructor.isBuffere.constructor.isBuffer(e)}function r(e){returnfunctiontypeof e.readFloatLEfunctiontypeof e.slicen(e.slice(0,0))}/*!* Determine if an object is a Buffer** author Feross Aboukhadijeh https://feross.org* license MIT*/e.exportsfunction(e){return null!e(n(e)||r(e)||!!e._isBuffer)}},function(e,t,n){use strict;function r(e){this.defaultse,this.interceptors{request:new s,response:new s}}var on(6),in(2),sn(17),un(18);r.prototype.requestfunction(e){stringtypeof e(ei.merge({url:arguments[0]},arguments[1])),ei.merge(o,{method:get},this.defaults,e),e.methode.method.toLowerCase();var t[u,void 0],nPromise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)nn.then(t.shift(),t.shift());return n},i.forEach([delete,get,head,options],function(e){r.prototype[e]function(t,n){return this.request(i.merge(n||{},{method:e,url:t}))}}),i.forEach([post,put,patch],function(e){r.prototype[e]function(t,n,r){return this.request(i.merge(r||{},{method:e,url:t,data:n}))}}),e.exportsr},function(e,t,n){use strict;function r(e,t){!i.isUndefined(e)i.isUndefined(e[Content-Type])(e[Content-Type]t)}function o(){var e;returnundefined!typeof XMLHttpRequest?en(8):undefined!typeof process(en(8)),e}var in(2),sn(7),u{Content-Type:application/x-www-form-urlencoded},a{adapter:o(),transformRequest:[function(e,t){return s(t,Content-Type),i.isFormData(e)||i.isArrayBuffer(e)||i.isBuffer(e)||i.isStream(e)||i.isFile(e)||i.isBlob(e)?e:i.isArrayBufferView(e)?e.buffer:i.isURLSearchParams(e)?(r(t,application/x-www-form-urlencoded;charsetutf-8),e.toString()):i.isObject(e)?(r(t,application/json;charsetutf-8),JSON.stringify(e)):e}],transformResponse:[function(e){if(stringtypeof e)try{eJSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:XSRF-TOKEN,xsrfHeaderName:X-XSRF-TOKEN,maxContentLength:-1,validateStatus:function(e){return e200e300}};a.headers{common:{Accept:application/json, text/plain, */*}},i.forEach([delete,get,head],function(e){a.headers[e]{}}),i.forEach([post,put,patch],function(e){a.headers[e]i.merge(u)}),e.exportsa},function(e,t,n){use strict;var rn(2);e.exportsfunction(e,t){r.forEach(e,function(n,r){r!tr.toUpperCase()t.toUpperCase()(e[t]n,delete e[r])})}},function(e,t,n){use strict;var rn(2),on(9),in(12),sn(13),un(14),an(10),cundefined!typeof windowwindow.btoawindow.btoa.bind(window)||n(15);e.exportsfunction(e){return new Promise(function(t,f){var pe.data,de.headers;r.isFormData(p)delete d[Content-Type];var lnew XMLHttpRequest,honreadystatechange,m!1;if(undefinedtypeof window||!window.XDomainRequest||withCredentialsin l||u(e.url)||(lnew window.XDomainRequest,honload,m!0,l.onprogressfunction(){},l.ontimeoutfunction(){}),e.auth){var ye.auth.username||,we.auth.password||;d.AuthorizationBasic c(y:w)}if(l.open(e.method.toUpperCase(),i(e.url,e.params,e.paramsSerializer),!0),l.timeoute.timeout,l[h]function(){if(l(4l.readyState||m)(0!l.status||l.responseURL0l.responseURL.indexOf(file:))){var ngetAllResponseHeadersin l?s(l.getAllResponseHeaders()):null,re.responseTypetext!e.responseType?l.response:l.responseText,i{data:r,status:1223l.status?204:l.status,statusText:1223l.status?No Content:l.statusText,headers:n,config:e,request:l};o(t,f,i),lnull}},l.onerrorfunction(){f(a(Network Error,e,null,l)),lnull},l.ontimeoutfunction(){f(a(timeout of e.timeoutms exceeded,e,ECONNABORTED,l)),lnull},r.isStandardBrowserEnv()){var gn(16),v(e.withCredentials||u(e.url))e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v(d[e.xsrfHeaderName]v)}if(setRequestHeaderin lr.forEach(d,function(e,t){undefinedtypeof pcontent-typet.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),e.withCredentials(l.withCredentials!0),e.responseType)try{l.responseTypee.responseType}catch(t){if(json!e.responseType)throw t}functiontypeof e.onDownloadProgressl.addEventListener(progress,e.onDownloadProgress),functiontypeof e.onUploadProgressl.uploadl.upload.addEventListener(progress,e.onUploadProgress),e.cancelTokene.cancelToken.promise.then(function(e){l(l.abort(),f(e),lnull)}),void 0p(pnull),l.send(p)})}},function(e,t,n){use strict;var rn(10);e.exportsfunction(e,t,n){var on.config.validateStatus;n.statuso!o(n.status)?t(r(Request failed with status code n.status,n.config,null,n.request,n)):e(n)}},function(e,t,n){use strict;var rn(11);e.exportsfunction(e,t,n,o,i){var snew Error(e);return r(s,t,n,o,i)}},function(e,t){use strict;e.exportsfunction(e,t,n,r,o){return e.configt,n(e.coden),e.requestr,e.responseo,e}},function(e,t,n){use strict;function r(e){return encodeURIComponent(e).replace(/%40/gi,).replace(/%3A/gi,:).replace(/%24/g,$).replace(/%2C/gi,,).replace(/%20/g,).replace(/%5B/gi,[).replace(/%5D/gi,])}var on(2);e.exportsfunction(e,t,n){if(!t)return e;var i;if(n)in(t);else if(o.isURLSearchParams(t))it.toString();else{var s[];o.forEach(t,function(e,t){null!eundefined!typeof e(o.isArray(e)?t[]:e[e],o.forEach(e,function(e){o.isDate(e)?ee.toISOString():o.isObject(e)(eJSON.stringify(e)),s.push(r(t)r(e))}))}),is.join()}return i(e(e.indexOf(?)-1??:)i),e}},function(e,t,n){use strict;var rn(2),o[age,authorization,content-length,content-type,etag,expires,from,host,if-modified-since,if-unmodified-since,last-modified,location,max-forwards,proxy-authorization,referer,retry-after,user-agent];e.exportsfunction(e){var t,n,i,s{};return e?(r.forEach(e.split(\n),function(e){if(ie.indexOf(:),tr.trim(e.substr(0,i)).toLowerCase(),nr.trim(e.substr(i1)),t){if(s[t]o.indexOf(t)0)return;set-cookiet?s[t](s[t]?s[t]:[]).concat([n]):s[t]s[t]?s[t], n:n}}),s):s}},function(e,t,n){use strict;var rn(2);e.exportsr.isStandardBrowserEnv()?function(){function e(e){var te;return n(o.setAttribute(href,t),to.href),o.setAttribute(href,t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,):,host:o.host,search:o.search?o.search.replace(/^\?/,):,hash:o.hash?o.hash.replace(/^#/,):,hostname:o.hostname,port:o.port,pathname:/o.pathname.charAt(0)?o.pathname:/o.pathname}}var t,n/(msie|trident)/i.test(navigator.userAgent),odocument.createElement(a);return te(window.location.href),function(n){var or.isString(n)?e(n):n;return o.protocolt.protocolo.hostt.host}}():function(){return function(){return!0}}()},function(e,t){use strict;function n(){this.messageString contains an invalid character}function r(e){for(var t,r,iString(e),s,u0,ao;i.charAt(0|u)||(a,u%1);sa.charAt(63t8-u%1*8)){if(ri.charCodeAt(u.75),r255)throw new n;tt8|r}return s}var oABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789/;n.prototypenew Error,n.prototype.code5,n.prototype.nameInvalidCharacterError,e.exportsr},function(e,t,n){use strict;var rn(2);e.exportsr.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var u[];u.push(eencodeURIComponent(t)),r.isNumber(n)u.push(expiresnew Date(n).toGMTString()),r.isString(o)u.push(patho),r.isString(i)u.push(domaini),s!0u.push(secure),document.cookieu.join(; )},read:function(e){var tdocument.cookie.match(new RegExp((^|;\\s*)(e)([^;]*)));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,,Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){use strict;function r(){this.handlers[]}var on(2);r.prototype.usefunction(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.ejectfunction(e){this.handlers[e](this.handlers[e]null)},r.prototype.forEachfunction(e){o.forEach(this.handlers,function(t){null!te(t)})},e.exportsr},function(e,t,n){use strict;function r(e){e.cancelTokene.cancelToken.throwIfRequested()}var on(2),in(19),sn(20),un(6),an(21),cn(22);e.exportsfunction(e){r(e),e.baseURL!a(e.url)(e.urlc(e.baseURL,e.url)),e.headerse.headers||{},e.datai(e.data,e.headers,e.transformRequest),e.headerso.merge(e.headers.common||{},e.headers[e.method]||{},e.headers||{}),o.forEach([delete,get,head,post,put,patch,common],function(t){delete e.headers[t]});var te.adapter||u.adapter;return t(e).then(function(t){return r(e),t.datai(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),tt.response(t.response.datai(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){use strict;var rn(2);e.exportsfunction(e,t,n){return r.forEach(n,function(n){en(e,t)}),e}},function(e,t){use strict;e.exportsfunction(e){return!(!e||!e.__CANCEL__)}},function(e,t){use strict;e.exportsfunction(e){return/^([a-z][a-z\d\\-\.]*:)?\/\//i.test(e)}},function(e,t){use strict;e.exportsfunction(e,t){return t?e.replace(/\/$/,)/t.replace(/^\//,):e}},function(e,t){use strict;function n(e){this.messagee}n.prototype.toStringfunction(){returnCancel(this.message?: this.message:)},n.prototype.__CANCEL__!0,e.exportsn},function(e,t,n){use strict;function r(e){if(function!typeof e)throw new TypeError(executor must be a function.);var t;this.promisenew Promise(function(e){te});var nthis;e(function(e){n.reason||(n.reasonnew o(e),t(n.reason))})}var on(23);r.prototype.throwIfRequestedfunction(){if(this.reason)throw this.reason},r.sourcefunction(){var e,tnew r(function(t){et});return{token:t,cancel:e}},e.exportsr},function(e,t){use strict;e.exportsfunction(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURLaxios.min.map使用Axios发送请求,并获取响应结果!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript srcjs/axios-0.18.0.js/scriptscript//get/* axios({method:get,url:http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan}).then(function (resp) {alert(resp.data);})*///get简化axios.get(http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan).then(function (resp) {alert(resp.data);})//post/*axios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:usernamezhangsan}).then(function (resp) {alert(resp.data);})*///post简化axios.post(http://localhost:8080/ajax-demo/axiosServlet,usernamezhangsan).then(function (resp) {alert(resp.data);})/script/body
/html结果展示四. JSON简介概念: JavaScript Object Notation JavaScript对象表示法由于语法简单, 层次结构鲜明, 现多用于作为数据载体, 在网络中进行数据传输基础语法定义var 变量名 {key1:value1, key2: value2, key3:value3};var json {name:zhangsan,age: 99,addr:[北京,天津,广州]
};获取数据变量名.keyjson.addr结果展示JSON数据和Java对象转换请求数据: JSON字符串转为Java对象响应数据: Java对象转为JSON字符串Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库是目前Java语言中最快的JSON库可以实现Java对象和JSON字符串的相互转换。导入坐标dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.62/version
/dependency创建一个Java类public class User {private Integer id;private String username;private String password;public Integer getId() {return id;}public void setId(Integer id) {this.id id;}public String getUsername() {return username;}public void setUsername(String username) {this.username username;}public String getPassword() {return password;}public void setPassword(String password) {this.password password;}Overridepublic String toString() {return User{ id id , username username \ , password password \ };}
}Java对象转JSON字符串JSON字符串转Java对象import com.alibaba.fastjson.JSON;
import com.guaiwu.pojo.User;public class JsonDemo {public static void main(String[] args) {//将Java对象转化成json字符串User user new User();user.setId(1);user.setUsername(lisi);user.setPassword(1234);String jsonString JSON.toJSONString(user);System.out.println(jsonString);//{id:1,password:1234,username:lisi}//将JSON字符串转化成java对象User u JSON.parseObject({\id\:1,\password\:\1234\,\username\:\lisi\}, User.class);System.out.println(u);}
}结果展示
