网站建设需要注册什么类型的公司模板网站建设源码

当前位置： 首页 > news >正文

网站建设需要注册什么类型的公司,模板网站建设源码,可以做词云的网站,电子商务网站建设基础考试AJAX技术 浏览器是多进程的#xff0c;简单的说就是#xff0c;浏览器每打开一个标签页#xff0c;就相当于创建了一个独立的浏览器进程。但是js是基于单线程的#xff0c;而这个线程就是浏览器的js引擎#xff0c;浏览器无论在什么时候都只且只有一个线程在运行JavaScri…AJAX技术 浏览器是多进程的简单的说就是浏览器每打开一个标签页就相当于创建了一个独立的浏览器进程。但是js是基于单线程的而这个线程就是浏览器的js引擎浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。如果需要实现多线程文件操作则需要依赖js中Work类来实现。 JavaScript作为一门客户端的脚本语言主要的任务是处理用户的交互而用户的交互无非就是响应DOM的增删改使用事件队列的形式一次事件循环只处理一个事件响应使得脚本执行相对连续。如果JS引擎被设计为多线程的那么DOM之间必然会存在资源竞争那么语言的实现会变得非常臃肿在客户端跑起来资源的消耗和性能将会是不太乐观的故设计为单线程的形式并附加一些其他的线程来实现异步的形式这样运行成本相对于使用JS多线程来说降低了很多。 问题的引入校验用户名是否重复 Controller public class UserController{GetMapping(/add)public String add(Model model){User usernew User(); model.addAttribute(user,user);return users/add; 打开输入页} }输入页面 thymeleaf form th:action{/add} methodpost th:object\({user} input nameusername th:field*{username}/ ...还有很多的输入域.... /form如果需要用户名称唯一则需要填充完所有的输入域后点击提交按钮才能将数据发送到服务器端由Controller调用Service进行用户名称的存在性判断。这里实际很麻烦因为仅仅是一个用户名的问题提供了很多的数据 解决方案1 输入用户名后点击一个额外的连接进行用户名称的验证 form input nameusername th:field*{username} /a href验证用户名/a ... ... /form问题1是如何生成响应页面问题2是由于采用的是同步处理机制所以在服务器端接收并处理数据的过程中客户端只能处于等待状态 目前所采用的请求/响应的同步处理会导致一种不连续的客户体验 解决方案2Ajax的交互方式 可以将不连续的客户体验转换为对客户比较友好的连续的客户体验 同步和异步 举个例子普通B/S模式(同步) AJAX技术(异步) 同步提交请求-等待服务器处理-处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发-服务器处理这时浏览器仍然可以作其他事情-处理完毕 同步是指发送方发出数据后等接收方发回响应以后才发下一个数据包的通讯方式 异步是指发送方发出数据后不等接收方发回响应接着发送下个数据包的通讯方式 易懂的理解: 异步传输: 你传输吧我去做我的事了传输完了告诉我一声同步传输: 你现在传输我要亲眼看你传输完成才去做别的事 什么是Ajax AJAX是异步的JavaScript和XML传输的是XML的格式数据可以通过JavaScript的XMLHttpRequest对象来进行数据交互Ajax包括 XHTML和CSS进行显示使用文档对象模型DOMDocument Object Model作动态显示和交互使用XML和XSLT做数据交互和操作使用XMLHttpRequest进行异步数据接收使用JavaScript将它们绑定在一起 理解 Ajax一种不用刷新整个页面便可与服务器通讯的办法 AJAX编程模型 用户名称的唯一性校验 !DOCTYPE html html langen xmlns:thhttp://www.thymeleaf.org head meta charsetUTF-8 titleTitle/title script var xhrnull; //由于在多个方法中使用所以定义为页面全局 function ff(){ //1、实例化xhr对象---XMLHttpRequest不管使用什么浏览器只要经过认证的浏览器都 会包含这个组件。不需要额外安装 createXHR();//由于浏览器的差异性所以构建xhr对象的具体方法不完全一致 if(xhr){ //2、定义请求回调事件处理 //获取用户输入的数据 let nndocument.getElementById(username).value; xhr.open(GET,exists?namenn,true);//打开服务器的连接参数1是请求方 法参数2是请求地址URL参数3是否采用异步请求 xhr.onreadystatechangecallback;//注册回调事件处理当特定事件发生时 【readystate发生变化时】会自动执行这里注册的方法 //3、发送请求 xhr.send();//由于采用的是get请求所以没有协议体是采用请求URL地址传递数据 }else{ alert(您的浏览器不支持异步操作); } } function createXHR(){ //浏览器的实现差异主要体现在IE10以前的版本和非IE浏览器两大类 if(window.ActiveXObject){ //判断窗口对象中是否有ActiveXObject组件从而判断 IE浏览器 xhrnew ActiveXObject(Microsoft.XMLHttp); //实际上不同版本的浏览器参 数不同 } else{ //针对非IE浏览器例如FireFox、Chrome等 xhrnew XMLHttpRequest(); } } function callback(){ //在一个异步请求处理过程中,XMLHttpRequest的readyState有0-4共5种状态4表示处理 完毕并接收到服务器的响应信息 var ssdocument.getElementById(show); if(4xhr.readyState){ if(200xhr.status){ //status是服务器的响应状态码例如404、500等200表 示处理正确 //处理响应信息 XMLHttpRequest对象中有2个属性可以用于接收服务器的响应信息 responseText将响应内容当作文本进行处理responseXML将响应内容当作一个xml文档进行处理 let ttxhr.responseText; //使用DOM进行页面的部分更新 ss.innerHTMLtt; } else { ss.innerHTML请求出现问题!; } }else{ ss.innerHTML数据正在处理中.... } } /script /head body form th:action{/add} methodpost th:object\){user} !– onblur用于定义输入域失去焦点事件当input:username失去焦点时则立即触发ff函数的 执行; onfocus获取焦点事件 – input nameusername idusername th:field{username} placeholder请输入用户名称 onblurff()/span idshow/spanbr/ input namepassword idpassword th:field{password} placeholder请输入口令/ /form /body /html对应的控制器一般不会在SpringMVC中使用response生成响应内容。注意AJAX是客户端技术和浏览器相关但是和所使用的服务器技术无关 GetMapping(/exists) public void exists(String name,HttpServletResponse response) throws IOException { System.out.println(exists…..); String msg; if(yanjun.equals(name)) msgfont colorred用户名称已经被占用/font;//偷懒因为这种写法在 html5中不允许 else msgfont colorblue用户名称可以使用/font; response.setContentType(text/html;charsetutf-8); PrintWriter outresponse.getWriter(); out.println(msg); out.close(); }具体开发过程中可以使用浏览器的开发者工具进行js代码的调试 特点 传统的web应用允许用户填写表单form当提交表单时就向web服务器发送一个请求。服务器接收并处 理传来的表单然后返回一个新的网页。这个做法浪费了许多带宽因为在前后2个页面中的大部分 HTML代码往往是相同的。 优势 AJAX应用可以仅向服务器发送并取回必需的数据并在客户端采用JavaScript处理来自服务器的响应 缺点 AJAX大量使用了Javascript和AJAX引擎而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持Mozilla虽然也支持AJAX但是提供XMLHttpRequest的方式不一样。所以使用AJAX的程序必须测试针对各个浏览器的兼容性AJAX更新页面内容的时候并没有刷新整个页面因此网页的后退功能是失效的有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个需要在明显位置提醒用户“数据已更新”对流媒体的支持没有FLASH、Java Applet好一些手持设备如手机、PDA等现在还不能很好的支持Ajax 区别 与传统的WEB应用不同 AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介从而消除了网络交互过程中的处理—等待—处理—等待缺点。AJAX引擎用JavaScript语言编写通常藏在一个隐藏的框架中它负责编译用户界面及与服务器之间的交互因为在服务器和浏览器之间交换的数据大量减少大约只有原来的5%结果就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端上完成所以Web服务器的处理时间也减少了使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据这使得Web应用程序更为迅捷地响应用户交互并避免了在网络上发送那些没有改变的信息 总结 Ajax在本质上是一个浏览器端的技术和具体的服务器端技术无关Ajax技术之主要目的在于局部交换客户端及服务器间之数据这个技术的主角XMLHttpRequest的最主要特点在于能够不用重新载入整个版面来更新资料 Refresh without Reload与服务器之间的沟通完全是透过Javascript来实现使用XMLHttpRequest本身传送的数据量很小所以反应会更快也就让网络应用更像一个桌面程 序 AJAX引擎允许用户与应用软件之间的交互过程异步进行独立于用户与网络服务器间的交流 用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作像内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求都可以交给AJAX来执行 AJAX工作原理 Ajax的核心是JavaScript对象XMLHttpRequest xhr对象在Internet Explorer 5中首次引入它是一种支持异步请求的技术。简而言之 XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应而不阻塞用户 AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介xhr从而消除了网络交互过程中的处理—等待—处理—等待缺点 用户的浏览器在执行任务时即装载了AJAX引擎。引擎用JavaScript语言编写通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互 AJAX引擎允许用户与应用软件之间的交互过程异步进行独立于用户与网络服务器间的交流。可用 Javascript调用AJAX引擎来代替产生一个HTTP的用户动作内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行
XMLHttpRequest 使用XMLHttpRequest可以用 JavaScript 发出到服务器的请求并在不阻塞用户的情况下处理响应 在创建 Web 站点并用 XMLHttpRequest 在客户机浏览器上无刷新地执行屏幕更新的同时它还提供了更多灵活性和丰富的用户体验。XMLHttpRequest应用程序的示例包括Google 的 Gmail 服务、Google的 Suggest 动态查询界面以及 MapQuest 的动态地图界面 没有一样东西在不同的浏览器上得到同样的结果。针对不同的浏览器创建xhr对象 function createXHR(){ //浏览器的实现差异主要体现在IE10以前的版本和非IE浏览器两大类 if(window.ActiveXObject){ //判断窗口对象中是否有ActiveXObject组件从而判断IE浏览器 xhrnew ActiveXObject(Microsoft.XMLHttp); //实际上不同版本的浏览器参数不同 } else{ //针对非IE浏览器例如FireFox、Chrome等 xhrnew XMLHttpRequest(); } }xhr常用方法 abort()停止当前请求getAllResponseHeaders() 作为字符串返回完整的headersgetResponseHeader(“headerLabel”) 作为字符串返回单个的headeropen(“method”,“URL”[,asyncFlag[,“userName”[, “password”]]])设置未决的请求的目标URL方 法和其他参数。主要使用的方法样例为open(“GET”,“/bb.do?id123”,true)send(content) 发送请求setRequestHeader(“label”, “value”) 设置header并和请求一起发送 get请求 get请求使用URL传递请求参数 let nndocument.getElementById(username).value; //获取输入框中用户输入的数据 xhr.open(GET,exists?namenn,true);//打开服务器的连接参数1是请求方法参数2是 请求地址URL参数3是否采用异步请求。这里利用URL传递请求参数?nameabcd xhr.onreadystatechangecallback;//注册回调事件处理当特定事件发生时【readystate发生 变化时】会自动执行这里注册的方法 //发送请求 xhr.send();//由于采用的是get请求所以没有协议体是采用请求URL地址传递数据post请求 post请求实际上就是模拟form表单的post提交 xhr.open(POST,exists,true); xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xhr.onreadystatechangecallback; xhr.send(namennage18);xhr属性 onreadystatechange注册状态改变的事件触发器当xhr的readyState发生变化时自动回调的函数readyState是xhr对象状态值属于integer类型不同的状态值表示不同的状态。0未初始化、1 读取中、2已读取、3交互中、4 完成。实际上使用onreadystatechange不可能获取到5种状态 值responseText服务器进程返回数据的文本版本事实上不管服务器生成的内容都会当作文本字符串进行处理responseXML服务器进程返回数据的兼容DOM的XML文档对象 当前的具体开发种一般不载使用xml进行数据传输建议使用 JSON 格式 status服务器返回的状态码如404文件未找到、200 “成功”statusText服务器返回的状态文本信息例如返回内容为200 OK 注册回调事件 onreadystatechange事件当请求状态发生变化即readyState的值发生变化的时候激发的事件 xhr.onreadystatechangecallback;注意:这个函数名称不加括号不指定参数。也可用Js函数直接量方式定义响应函数。如 XMLHttpReq.onreadystatechange function() { }; onreadystatechange属性接收一个EventListener值保证在事件触发时激活该对象指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对 象的onreadystatechange属性就可以了 事件处理函数 function callback(){ //在一个异步请求处理过程中,XMLHttpRequest的readyState有0-4共5种状态4表示处理完 毕并接收到服务器的响应信息 var ssdocument.getElementById(show); if(4xhr.readyState){ if(200xhr.status){ //status是服务器的响应状态码例如404、500等200表示处理 正确 //处理响应信息 XMLHttpRequest对象中有2个属性可以用于接收服务器的响应信息 responseText将响应内容当作文本进行处理responseXML将响应内容当作一个xml文档进行处理 let ttxhr.responseText; ss.innerHTMLtt; } else { ss.innerHTML请求出现问题!; } }else{ ss.innerHTML数据正在处理中…. } }改进 AJAX 虽然可以实现无刷新更新页面内容但是也不是什么地方都可以用主要应用在交互较多、频繁读数据、数据分类良好的Web 应用中 开发步骤AJAX实质上也是遵循Request/Server模式所以这个框架基本的流程是 对象初始化发送请求服务器接收服务器返回客户端接收修改客户端页面内容 只不过这个过程是异步的 Javascript对象编程 为了简化AJAX编程可以利用js的对象编程将繁琐的步骤进行封装 function AjaxObject(){ this.xhrnull; this.getXMLHttpRequestfunction (){ if(window.ActiveXObject){ this.xhrnew ActiveXObject(Microsoft.XMLHttp); } else { this.xhrnew XMLHttpRequest(); } }; //url是请求地址必须的params是请求参数格式应该为keyvaluekeyvalue HttpMethod是请求方法 this.sendRequestfunction(url,params,HttpMethod){ //如果调用时没有传递HttpMethod参数则默认请求方法为post if(!HttpMethod) HttpMethodPOST; //创建XMLHttpRequest对象 this.getXMLHttpRequest(); if(!this.xhr) { //建立和服务器的连接 this.xhr.open(HttpMethod,url,true); //注册回调事件处理函数 this.xhr.onreadystatechangethis.callback; if(POSTHttpMethod){ this.xhr.setRequestHeader(Content-Type,application/x-wwwform-urlencoded); } //发送请求 this.xhr.send(params); } else { alert(您的浏览器不支持异步操作!); } }; this.callbackfunction(){}; }模板化操作已经定义在AjaxObject中页面中需要使用则仅仅进行引入即可 !DOCTYPE html html langen xmlns:thhttp://www.thymeleaf.org head meta charsetUTF-8 titleTitle/title script src../static/jslib/ajax.js th:src{/jslib/ajax.js} /script /head body form action# th:action{/add} methodpost th:object${user} input nameusername idusername th:field{username} onblurff()/ span iderrusername/spanbr/ input namepassword typepassword th:field{password}/ /form script function ff() { //获取用户在input idusername/中的输入数据 var uname document.getElementById(username).value; var errname document.getElementById(errusername); console.log(errname); if (uname ! ) { var obj new AjaxObject(); //覆盖定义AjaxObject中的callback函数 obj.callback function () { console.log(errname); if (4 obj.xhr.readyState) { if (200 obj.xhr.status) { let ss obj.xhr.responseText; console.log(ss); errname.innerHTML ss; } } } obj.sendRequest(exists?username uname); } else { errname.innerHTML 请输入用户名称; } } /script /body /html