fw怎么做网站,国外做评论的网站,html静态网站开发,工作室英文一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。
一.什么是Ajax?
答:
AJAX即“Asynchronous Javascript And XML”#xff08;异步JavaScript和XML#xff09;#xff0c;是指一种创建交互式网页应用的网页开发技术。
AJAX 异步 JavaScript和XML#x…一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。
一.什么是Ajax?
答:
AJAX即“Asynchronous Javascript And XML”异步JavaScript和XML是指一种创建交互式网页应用的网页开发技术。
AJAX 异步 JavaScript和XML标准通用标记语言的子集。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。
传统的网页不使用 AJAX如果需要更新内容必须重载整个网页页面。
二.Ajax的关键元素
Ajax不是单一的技术而是四种技术的集合
JavaScript JavaScript是通用的脚本语言用来嵌入在某种应用中。Web浏览器中嵌入的JavaScript解释器允许用过程序与浏览器的很多内建功能交互。Ajax应用程序是使用JavaScript编写的。CSS层叠样式表 CSS为Web页面元素提供了一种可重用的可视化样式的定义方法。它提供了简单而又强大的方法以一致的方式定义和使用可视化样式。在Ajax应用中用户界面的样式可以通过CSS独立修改。DOM文档对象模型 DOM以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOMAjax应用程序可以运行时改变用户界面或者高效的重绘页面中的某个部分。XMLHttpRequest对象 XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML但是也可以很好的支持任何基于文本的数据格式XMLHttpRequest这个名字取得是在是很不恰当。尽管XMLHttpRequest对于完成这件工作来说最为灵活和通用的工具但还有其他方法也可以从服务器获取数据。
三.接下来我们讲解XMLHttpRequest对象
讲解之前先来熟悉一下它有哪些属性和方法和传统的有何差异 下面的图解更直观的解释 XMLHttpRequest一些常用属性
当一个XMLHttpRequest对象被创立后readyState属性标示了当前对象处于什么状态可以通过对该属性的访问来判读此次请求的状态然后做出相应的操作 1.responseText属性 responseText属性包含客服端接收到的HTTP响应的文本内容当readyState属性为0、1或2时responseText属性包含一个空字符串当readyState属性值为3时响应中包含客服端还没完成的响应信息当readyState属性值卫4responseText属性才包含完整的响应信息。 2.responseXML属性 只有当readyState属性为4并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时该属性才会有值并且被解析成一个XML文档否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。 3.status属性 status属性描述了HTTP状态代码注意仅当readyState属性值为3正在接受中或者4已加载时才能对此属性进行访问。如果在readyState属性值小于3时试图去读取status属性值将引发一个异常。 4.statusText属性 statusText属性描述了HTTP状态代码文本并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常。
好了接下来就切入真实例子当中吧
1 index.jsp页面 script typetext/javascript function checkUser(){ //获取页面上的输入数据 var valuedocument.getElementById(uname).value; //创建路径 var urlajaxServlet?namevalue; //创建XMLHttpRequest对象 var xhr; //能力检测 判断是否是IE浏览器 if(windown.XMLHttpRequest){ //非IE浏览器 xhrnew XMLHttpRequest(); }else{ //IE浏览器 xhrnew ActiveObject(Microsoft.XMLHTTP); } //建立一个请求 (请求方式url是否异步默认为false) xhr.open(get,url,true); //在状态发生改变时发生 xhr.onreadystatechangefunction(){ if(xhr.readystate4xhr.status200){ //获取回传的数据 var resultxhr.responseText; document.getElementById(msg).innerText(result); } } /script
2 body 用户名input iduname οnblurcheckUser() /span idmsg/span /body
3AjaxServlet书写 public AjaxServlet extends HttpServlet{ public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { doPost(request,response); } public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { String unamerequest.getParamter(name); if(admin.equals(uname)){ //把消息回送给页面 response.getWriter().write(已经注册); }else{ response.getWriter().write(可以注册); } } }
4web.xml servlet servlet-nameAjaxServlet/servlet-name servlet-classcn.servlet.AjaxServlet/servlet-class /servlet servlet-mapping servlet-nameAjaxServlet/servley-name url-pattern/ajaxServlet/url-pattern /servlet-mapping
