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:返回纯文本字符串。

Ajax详解及使用Ajax时的返回值类型有哪些?的更多相关文章

  1. C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解  ...

  2. (转)C# WebApi 接口返回值不困惑:返回值类型详解

    原文地址:http://www.cnblogs.com/landeanfen/p/5501487.html 正文 前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi ...

  3. [转]C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解

    本文转自:http://www.cnblogs.com/landeanfen/p/5501487.html 阅读目录 一.void无返回值 二.IHttpActionResult 1.Json(T c ...

  4. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  5. Web Api 接口返回值不困惑:返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 WebApi 接口参数:传参详解,这篇博文内容本身很基础 ...

  6. WebApi 接口返回值类型详解 ( 转 )

    使用过Webapi的园友应该都知道,Webapi的接口返回值主要有四种类型 void无返回值 IHttpActionResult HttpResponseMessage 自定义类型 此篇就围绕这四块分 ...

  7. WebApi接口返回值不困惑:返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.作为程序猿,我们都知道参数和返回值是编程领域不可分割的两大块,此前分享了 ...

  8. WebApi 接口返回值不困惑:返回值类型详解。IHttpActionResult、void、HttpResponseMessage、自定义类型

    首先声明,我还没有这么强大的功底,只是感觉博主写的很好,就做了一个复制,请别因为这个鄙视我,博主网址:http://www.cnblogs.com/landeanfen/p/5501487.html ...

  9. C#进阶系列——WebApi接口返回值类型详解

    阅读目录 一.void无返回值 二.IHttpActionResult 1.Json(T content) 2.Ok(). Ok(T content) 3.NotFound() 4.其他 5.自定义I ...

随机推荐

  1. Spark MLlib LDA 源代码解析

    1.Spark MLlib LDA源代码解析 http://blog.csdn.net/sunbow0 Spark MLlib LDA 应该算是比較难理解的,当中涉及到大量的概率与统计的相关知识,并且 ...

  2. 《鸟哥的Linux私房菜-基础学习篇(第三版)》(四)

    第3章 主机规划与磁盘分区        1. Linux与硬件的搭配        首先谈了认识计算机的硬件配置. 然后谈了选择与Linux搭配的主机配置. 在Linuxserver中,内存的重要性 ...

  3. (cocos2d-js游戏)測试你的反应速度----------基本逻辑(上)

    游戏玩法:点击開始游戏.等待一个随机时间.然后背景颜色会变(在t1时刻),这时候你须要点击屏幕(在t2时刻),游戏结束.你的反应时间就是天t2-t1. 游戏逻辑: 游戏逻辑非常easy,如上图所看到的 ...

  4. How to remove a Data Guard Configuration from Primary Database (文档 ID 733794.1)

    APPLIES TO: Oracle Database - Enterprise Edition - Version 10.1.0.2 to 11.2.0.3 [Release 10.1 to 11. ...

  5. FansMail:邮件发送标准API与技术实现(Java)

    发送邮件,是Web系统等IT建设中最常见的一种功能. 我对最常见的一种需求进行了抽象和封装,定义了一套标准的API,并且使用Java技术实现. 项目信息 项目名称:FansMail 项目作者:LeiW ...

  6. PatentTips - Apparatus and method for a generic, extensible and efficient data manager for virtual peripheral component interconnect devices (VPCIDs)

    BACKGROUND A single physical platform may be segregated into a plurality of virtual networks. Here, ...

  7. ajax 通过return 返回data值

    方法例如以下: 1. ajax 必须为同步 设置async:false 2. 定一个局部变量 把data赋值给局部变量 然后 return 局部变量就可以 示比例如以下 function getEmp ...

  8. Lucy_Hedgehog techniques

    在project euler 的第\(10\)题的 \(forum\) 中 Lucy Hedgehog 提到的这种方法. 求 \(n\) 以内素数个数以及求 \(n\) 以内素数和的算法. 定义\(S ...

  9. Python中的Sets数据结构

    Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...

  10. cmake配置c++可调用的文件路径参数

    一.目的 在程序中使用一个路径配置,因为在svn服务器的测试数据,测试数据成为了本地路径,在程序中使用了绝对路径来处理文件的输入,这个令人头疼啊. 每次下完代码,我得挨个地方去找,谁在用本地路径,有点 ...