Ajax详解及使用Ajax时的返回值类型有哪些?

原创 2018年04月15日 15:08:48
Ajax详解

Ajax = 异步 JavaScript 和 XML。

Ajax 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

(注:图片来自网络)
这里写图片描述

如何使用Ajax技术

首先,需要获取XMLHttpRequest对象:

var xhr;
xhr = new XMLHttpRequest();

XMLHttpRequest对象有5个核心属性:

  • onreadystatechange:当准备状态发生变化
  • readyState:准备状态,该属性的值可能是0~4之间的数字,0表示尚未建立连接,4表示接收到响应
  • status:响应码,例如404、200
  • responseText:响应的字符串
  • responseXML:响应的XML

当需要发出请求时,需要XMLHttpRequest对象的open()send()方法:

  • open(请求方式, 请求路径, 是否异步)
  • send()

使用演示:

// 异步检查用户名是否存在
function checkUsername(username) {
    // 获取XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    var url = "check_username.do?username="
            + username;

    // 配置onreadystatechange
    xhr.onreadystatechange = function() {
        // 当服务器已经响应(4)且响应码是200时
        if (xhr.readyState == 4
                && xhr.status == 200) {
            // 根据服务器的响应,显示响应的提示消息
            if (xhr.responseText == "1") {
                // 表示用户名存在
                document.getElementById("username_hint").innerHTML= "用户名正确";
            } else {
                // 表示用户名不存在
                document.getElementById("username_hint").innerHTML= "用户名不存在";
            }
        }
    };
    // 调用函数
    xhr.open("GET", url, true);
    xhr.send();
}

在JQuery中,Ajax有三种实现方式:

$.ajax({
    "url":"",   //访问路径
    "data":"",  // 需要传输的数据
    "type":"",  // 请求方式
    "dataType":"",  // 返回值类型
    "success":function(obj){},      // 响应成功时的回调函数
    "error":function(obj){}     // 响应失败时的回调函数
});

$.get(URL,callback);

$.post(URL,data,callback);

(注:以下内容来自https://www.cnblogs.com/fly-xfa/p/5851746.html)

使用Ajax时的返回值类型有哪些?
xml、html、script、JSON、jsonp、text
  • xml:返回XML文档,可用 jQuery 处理。

  • html:返回纯文本HTML信息;

  • script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了 “cache” 参数;

  • json:json方式和html方式在请求和服务器中完全是一样,请求的返回值实际上都是String对象,有两点不同,第一:html方式的时候并没有限制返回的字符串格式,而json方式的时候,必须符合json协议的规范。第二:html方式请求完成之后没有做任何的操作直接回调sucuess,而json多了一步就是加了eval,执行返回的字符串,看看源码data = eval_r("(" + data + ")");返回json对象;(方法的返回值是Javabean时,在响应体中响应成json字符串格式)

  • jsonp:jsonp方式的交互方式和js是一样的,本身xmlHttpRequest对象并不能跨域访问,但是script标签的src可以跨域访问,这里就注意两个概念:第一Ajax是不能跨域操作的,第二jQuery的jsonp是可以跨域操作,jsonp到底是什么东西呢?他是一个非官方的定义,目前的规范,需要服务器和客户端进行配合使用;

  • text:返回纯文本字符串。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41244651/article/details/79949472

Ajax返回值类型

Ajax返回值类型主要有XML类型和文本类型,其中文本类型又可以分为HTML、json类型等。1、返回值之XML类型 如果服务器的响应头中Content-type的内容为text/xml时,此时XM...
  • baochao95
  • baochao95
  • 2016-10-10 22:07:06
  • 3007

ajax--返回值类型response

xml 暂空 json  function test2(){ xhr.open('POST','./4json.php',true); xhr.send(null); xhr.onre...
  • sonia_gintoki
  • sonia_gintoki
  • 2016-01-26 09:43:49
  • 2153

jQuery的Ajax中dataType选项用于设置返回值类型

jQuery的Ajax中dataType选项用于设置返回值类型 [jQuery的Ajax文档] http://docs.jquery.com/Ajax/jQuery.ajax#opt...
  • hu_zhenghui
  • hu_zhenghui
  • 2007-09-24 23:10:00
  • 17914

js ajax 返回值问题

// valid 方法用ajax 调用服务器接口,来校验 corn 表达式 function valid(corn){         var result = false;         $...
  • shaokai132333
  • shaokai132333
  • 2015-11-25 18:15:05
  • 4406

Ajax需要注意的几个问题

在应用Ajax时,需要注意安全问题、性能问题和浏览器兼容性问题,下面进行具体介绍。 一 安全问题 随着网络的普及,安全问题已经是一个不可忽略的重要问题了。由于Web本身就是不安全的,所以尽可能降低...
  • chengqiuming
  • chengqiuming
  • 2017-04-12 10:49:28
  • 349

ajax如何处理服务器返回的三种数据类型

其原理很简单,结构上基本不变,只是改变处理返回数据的方式.1.Text/HTML格式 这种返回类型处理很简单,直接就当作字符串用就行了.为了方便使用,封装成如下函数:/** * @function...
  • qq_18297675
  • qq_18297675
  • 2016-07-08 17:38:08
  • 14875

jquery ajax返回请求值却进入error

1、返回数据格式不对,在jquery1.4及之后的版本要求格式争取,具体请参考json官网。 2、(大多数原因)请求时提交的类型与返回的类型不匹配,在json中尤为多。...
  • jxsczqh
  • jxsczqh
  • 2015-01-13 11:38:50
  • 387

关于ajax的dataType类型为text返回值乱码的问题

下午在关于action里返回中文字符串传至前台乱码,花了很长时间用了网上很多方法都没解决问题,最后通过同事帮助才得已解决,只需在控制层对应的action中添加 @RequestMapping(val...
  • aluckyumi
  • aluckyumi
  • 2017-08-17 18:00:22
  • 623

ajax处理从servlet获取的json array

ajax处理从servlet获取的json array 首先不要忘记导入json.jar 和 jquery.jar  前端代码: Insert title here ...
  • m0_38024780
  • m0_38024780
  • 2017-08-16 11:24:25
  • 143
收藏助手
不良信息举报
您举报文章:Ajax详解及使用Ajax时的返回值类型有哪些?
举报原因:
原因补充:

(最多只允许输入30个字)