AJAX responseText和responseXML

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了AJAX responseText和responseXML，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

使用ajax发起请求时候，响应的数据类型由ajax设置的接受数据方式决定：

responseText决定响应的数据类型是文本;

responseXML决定响应的数据类型xml文档。

以Servlet为例，当返回xml文档时候，Servlet一定要设置response.setContentType("text/xml;charset=utf-8")。根据是否需要缓存，可以设置response.setHeader("Cache-control","no-cache");


响应数据的格式由HTTP响应报文的Content-Type决定：

text/xml xml

text/html html

text/plain 文本

application/json json

下面是Servlet返回文本、xml文档、json、html的代码：

index.jsp

[html] view plain copy
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <htmlheadMetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"title>Inserttitlehere</scripttype="text/javascript"
  5. functiongetXMLHttpRequest(){
  6. varxmlReq;
  7. if(window.XMLHttpRequest){//codeforIE7+,Firefox,Chrome,Opera,Safari
  8. xmlReq=newXMLHttpRequest();
  9. }else{//codeforIE6,IE5
  10. newActiveXObject("Microsoft.XMLHTTP");
  11. }
  12. returnxmlReq;
  13. //返回文本数据测试
  14. functionajaxText(){
  15. varoReq=getXMLHttpRequest();
  16. oReq.open("POST","TextServlet",true);
  17. oReq.setRequestHeader("Content-type",
  18. "application/x-www-form-urlencoded");//提交表单必须
  19. oReq.send("name=我是文本&pwd=123");
  20. oReq.onreadystatechange=function(){
  21. if(oReq.readyState==4&&oReq.status==200){
  22. document.getElementById("myDiv").innerHTML=oReq.responseText;//responseText响应类型是文本
  23. }
  24. //返回XML文档测试
  25. functionajaxXML(){
  26. oReq.send("name=我是xml&pwd=111");
  27. varxmlObj=oReq.responseXML;//responseXML响应类型是XML文档
  29. varnames=xmlObj.documentElement.getElementsByTagName("name");
  30. varname=names[0].firstChild.nodeValue;
  31. varpwds=xmlObj.documentElement.getElementsByTagName("pwd");
  32. varpwd=pwds[0].firstChild.nodeValue;
  33. name+","+pwd;
  34. //返回json文档测试
  35. functionajaxJSON(){
  36. oReq.send("name=我是json&pwd=varresObj=oReq.responseText;//json字符串用文本形式接收
  37. varjsonObj1=eval('('+resObj+')');
  38. varname1=jsonObj1.name;
  39. varpwd1=jsonObj1.pwd;
  40. name1+","+pwd1;
  41. //返回html
  42. functionajaxHTML(){
  43. oReq.send("name=我是html&pwd=oReq.responseText;//html用文本形式接收
  44. resObj;
  45. scriptbodybuttononclick="ajaxText()">ajax请求文本button"ajaxXML()">ajax请求XML文档"ajaxJSON()">ajax请求json字符串"ajaxHTML()">ajax请求htmldivid="myDiv">div>


返回文本的Servlet:

[java] copy
    packagecom.ajax.test;
  1. importjava.io.IOException;
  2. importjavax.servlet.ServletException;
  3. importjavax.servlet.ServletOutputStream;
  4. importjavax.servlet.http.HttpServlet;
  5. importjavax.servlet.http.HttpServletRequest;
  6. importjavax.servlet.http.HttpServletResponse;
  7. publicclassTextServletextendsHttpServlet{
  8. protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
  9. doPost(request,response);
  10. voiddoPost(HttpServletRequestrequest,IOException{
  11. System.out.println("intext");
  12. request.setCharacterEncoding("utf-8");
  13. Stringname=request.getParameter("name");
  14. Stringpwd=request.getParameter("pwd");
  15. "name:"+name+",pwd:"+pwd);
  16. //返回文本数据
  17. response.setContentType("text/plain;charset=utf-8");
  18. ServletOutputStreamoutputStream=response.getOutputStream();
  19. outputStream.write(name.getBytes("utf-8"));
  20. outputStream.write(pwd.getBytes("utf-8"));
  21. outputStream.flush();
  22. outputStream.close();
  23. }

返回xml文档的Servlet：

classHanderServlet"inxml");
  • //返回xml文档
  • "text/xml;charset=utf-8");
  • response.setHeader("Cache-control","no-cache");
  • StringBuffersb=newStringBuffer();
  • sb.append("<?xmlversion='1.0'encoding='utf-8'?>");
  • "<user><name>"+name+"</name><pwd>"+pwd+"</pwd></user>");
  • outputStream.write(sb.toString().getBytes(}


    • 返回json字符串的Servlet：

    classJsonServletextendsHttpServlet{
  • "injson");
  • "{'name':"+name++pwd+"}");
  • //返回json字符串数据
  • "application/json;charset=utf-8");
  • Stringres="{'name':'"+name+"','pwd':'"+pwd+"'}";//json字符串要写成"{'name':'tom'}"的形式，里面的key和value也要加''写成字符串的形式
  • outputStream.write(res.getBytes(

    返回html的Servlet：
    classHtmlServlet"inhtml");
  • "utf-8");
  • "name");
  • "pwd");
  • +pwd);
  • //返回html文档
  • "text/html;charset=utf-8");
  • "no-cache");
  • ServletOutputStreamoutputStream=response.getOutputStream();
  • "<fontsize='2'color='blue'>"+name+pwd+"</font>";
  • outputStream.flush();
  • outputStream.close();
  • }
    • 原文链接：https://www.f2er.com/ajax/160450.html

    猜你在找的Ajax相关文章

    网页的异步请求（Ajax）
    JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
    手动实现AJAX
    AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
    axios异步提交表单数据的不同形式
    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
    php的ajax简单实例
    很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
    Json与Ajax(注册实例）
    需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
    jSon和Ajax登录功能，ajax数据交互案例
    ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
    关于AjaxControlToolkit的样式问题
    网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
    一个简单的AJAX实现(HELLO AJAX)
    客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
    AJAX中文乱码的两类问题及解决之策
    1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
    实例：AJAX返回xml代码如何在网页中显示
    建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作