ajax学习笔记2

前端之家收集整理的这篇文章主要介绍了ajax学习笔记2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象

在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改代码以及新增的代码

1.新增一个servlet类

AJAXXMLServer.java


 
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
//XML的数据
public class AJAXXMLServer extends HttpServlet {     
    public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {         
        //response.setContentType("text/html;charset=utf-8");         
        response.setContentType("text/xml;charset=utf-8"); //修改此次为text/xml           
        PrintWriter out=response.getWriter();         
        //1.取参数         
        String old=request.getParameter("name");         
        StringBuffer sb=new StringBuffer();         
        sb.append("<message>");         
        //2.检查是否有问题         
        if(old==null||old.length()==0){              
            sb.append("用户名不能为空").append("</message>"); //拼装XML         
        }else{             
            //3.校验操作            
            String name=old;             
            if(name.equals("pan")){               
                //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端,而不是将一个新的页面发送给用户  //写法没有变,本质变了                
                sb.append("用户名["+name+"]已经存在").append("</message>"); //拼装XML   
            }else{                
                sb.append("用户名["+name+"]可以使用").append("</message>"); //拼装XML 
            }         
        }             
        out.println(sb.toString());//注意,此句一定不能少了,并且注意放置的位置
    }          
                 
    public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        this.doGet(request,response);          
    } 
}

2.修改web.xml

加入AJAXXMLServer类的配置

   
<servlet>        
    <servlet-name>AJAXXMLServer</servlet-name>        
    <servlet-class>AJAXXMLServer</servlet-class>     
</servlet>     
<servlet-mapping>        
    <servlet-name>AJAXXMLServer</servlet-name>        
    <url-pattern>/AJAXXMLServer</url-pattern>     
</servlet-mapping>

3.修改verify.js文件

第一处:

把xmlhttp.open("GET","AJAXServer?name="+username,true);

改为

xmlhttp.open("GET","AJAXXMLServer?name="+username,true);//responseXML方式,修改类名

第二处:


responseText  //获取服务器端返回的数据             
//第一种方式:获取服务器端输出的纯文本数据             
var responseText=xmlhttp.responseText;             
//将数据显示页面上  通过dom的方式找到div标签对应的元素节点           
var divNode=document.getElementById("result");             
//设置元素节点中的html的内容             
divNode.innerHTML=responseText;

改为:


第三处:


text/html

if(xmlhttp.overrideMimeType){   xmlhttp.overrideMimeType("text/html"); }

改为:


if(xmlhttp.overrideMimeType){   xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方 }


对于IE浏览器如果第三处不修改不会报错,但是对于firefox浏览器,如果此处不修改,以下语句会报错 var domObj = xmlhttp.responseXML; 可以通过增加alert语句来验证,IE浏览器的时候第三处修改代码的if语句不会被执行,firefox浏览器的时候这个if语句就会被执行 说明:访问路径、运行截图与ajax学习笔记1中都是已经的,就省略了。

原文链接:https://www.f2er.com/ajax/166423.html

猜你在找的Ajax相关文章