AJAX的简单梳理
一、Ajax的简介
Ajax，异步JavaScript和XML，异步提交，无刷新技术，局部刷新技术
1）传统的客户端与服务器端交互的模式
客户端发送请求直接给服务端，服务接受到请求后进行逻辑运算，最终服务器端会将结果直接响应给客户端。
2）Ajax的客户端与服务端交互模式
客户端发送请求时，不是将请求直接发送给服务器端，是将请求发送客户端ajax引擎，引擎负责帮助客户端提交请求到服务器端，服务器端接受请求进行逻辑运算，最终服务器端会将结果响应给ajax引擎，ajax引擎监听到结果已经返回，通知客户端接收数据。
二、快速入门
<script type="text/javascript">
function fn1() {
//1、创建ajax引擎
var xmlhttp = new XMLHttpRequest();
//alert(xmlhttp.readyState);
//2、设置监听
xmlhttp.onreadystatechange = function() {
//5、接受数据 4代表服务器端已经响应数据完毕的状态
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var rondomData = xmlhttp.responseText;
//动态的将是数据设置到span1中
document.getElementById("span1").innerHTML = rondomData;
}
};
//3、绑定地址
xmlhttp.open("GET", "/test/async", false);
//4、发送请求
xmlhttp.send();
}
function fn2() {
//1、创建ajax引擎
var xmlhttp = new XMLHttpRequest();
//alert(xmlhttp.readyState);
//2、设置监听
xmlhttp.onreadystatechange = function() {
//5、接受数据 4代表服务器端已经响应数据完毕的状态
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var rondomData = xmlhttp.responseText;
//动态的将是数据设置到span1中
document.getElementById("span2").innerHTML = rondomData;
}
};
//3、绑定地址
xmlhttp.open("GET", "/test/async", true);
//4、发送请求
xmlhttp.send();
}
</script> </head>
<body>
<input onclick="alert('xxxxx')" type="button" value="测试按钮">
<br>
<input onclick="fn1()" type="button" value="同步提交">
<span id="span1"></span>
<br>
<input onclick="fn2()" type="button" value="异步提交">
<span id="span2"></span>
<br>
</body>
</html>
<!--实际一般很少会用原生JS这种方式-->
步骤的详解
创建ajax引擎
var xmlhttp = new XMLHttpRequest();(ie6以上都可以)
解决浏览器的兼容性：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
设置ajax引擎对象的状态监听
监听事件：onreadystatechange = function(){}
ajax引擎的状态：
readyState：数字 不同的数字代表引擎不同的状态
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪 --- 服务端将属性响应给客户端ajax引擎
响应的状态：status ---- 状态码 200 302 304 404 500
当服务器端响应的结果没有问题时 即status=200 才获取数据
绑定地址
open(method,url,async);
其中的参数：
method：请求方式，POST/GET
url：请求服务器资源地址
async：是否异步 true代表异步 false代表同步
注意：仅仅是绑定数据 请求尚未发送
发送请求
send(params);
其中的参数：
params：代表是请求参数 name=zhangsan&password=123
但是,send方法中的参数只有post方式提交时才设置
get提交时 参数携带带url后面
注意：post提交，必须要设置一个请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
接受响应数据
在监听的函数中接受数据，接受数据库时，保证ajax引擎的状态是4，保证响应的状态是200
if(xmlhttp.readyState==4&&xmlhttp.status==200){
alert(xmlhttp.responseText);
}
ajax引擎取出数据的方式：
responseText：服务器端返回的是普通字符串
responseXml：服务器端返回是xml(基本不使用了)
三、jquery的ajax操作
load方法
obj.load(url, [data], [callback])
其中的参数：
url：ajax提交时 提交的服务器端的地址
data：请求的数据
callback：服务器端响应后调用的函数（回调函数）
注意：load方法 是jquery对象调用的
get方法
$.get(url, [data], [callback], [type])
其中的参数：
url：提交的地址
data：提交的参数
callback：回调函数
type：声明返回值的类型
xml, html, script, json, text, _default。
post方法
同get方法
ajax方法(个人用这个比较习惯)
$.ajax(options);
其中options代表参数的集合，参数集合的表现方式是json
options是多个参数的json格式
{参数：参数值，参数：参数值...}
常用的参数：
async：是否异步 false/true
data：提交给服务器的参数
dataType：服务端端返回的数据类型
error：出错调用的函数
success：ajax执行成功后调用的函数
type：提交方式
url：提交的地址
json:
json是一种不依赖于任何语言的数据交换格式。
json的三种数据格式：
1）对象格式 {name:value,name:value...}
user对象
private int id = 10；
private String name = “zhangsan”
private String addr = “beijing”
json格式描述user对象：
{“id”:10,”name”:”zhangsan”,”addr”:“beijing”}
注意：在json数据格式中 name类型是字符串，value类型是Object
2）数组格式 [元素，元素，元素...]
元素可以是任何类型，String,int,User
3）组合格式
对象格式与数组格式可以互相嵌套
解析json时一般常用的工具:Gson,fastjson...
一般搜索时商品名补全阿,登陆时的一些提示阿,都会用到AJAX
AJAX的简单梳理的更多相关文章
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- 机器学习&数据挖掘笔记（常见面试之机器学习算法思想简单梳理）
机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理) 作者:tornadomeet 出处:http://www.cnblogs.com/tornadomeet 前言: 找工作时( ...
- [转]机器学习&数据挖掘笔记_16（常见面试之机器学习算法思想简单梳理）
机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理) 转自http://www.cnblogs.com/tornadomeet/p/3395593.html 前言: 找工作时(I ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- C#正则表达式_简单梳理_Emoji表情字符处理
A-最近一直有接触到正则表达式,现对其做简单梳理: private const RegexOptions OPTIONS = RegexOptions.IgnoreCase | RegexOption ...
- RocketMQ 简单梳理 及 集群部署笔记【转】
一.RocketMQ 基础知识介绍Apache RocketMQ是阿里开源的一款高性能.高吞吐量.队列模型的消息中间件的分布式消息中间件. 上图是一个典型的消息中间件收发消息的模型,RocketMQ也 ...
- Memcached概念、作用、运行原理、特性、不足简单梳理（1）
大家可能对memcached这种产品早有了解,或者已经应用在自己的网站中了,但是也有一些朋友从来都没有听说过或者使用过.这都没什么关系,本文旨在从各个角度综合的介绍这种产品,尽量深入浅出,如果能对您现 ...
- 第107天：Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
随机推荐
- 自动化利器-RPM自定义打包
1.Rpm打包程序 1.1为什么要使用rpm打包 1.编译安装软件,优点是可以定制化安装目录.按需开启功能等,缺点是需要查找并实验出适合的编译参数,诸如MySQL之类的软件编译耗时过长. 2.yum安 ...
- 高并发场景之RabbitMQ篇
上次我们介绍了在单机.集群下高并发场景可以选择的一些方案,传送门:高并发场景之一般解决方案 但是也发现了一些问题,比如集群下使用ConcurrentQueue或加锁都不能解决问题,后来采用Redis队 ...
- SystemClock官方简介
public final class SystemClock extends Object java.lang.Object ↳ android.os.SystemClock Class Ove ...
- AVL树的旋转操作详解
[0]README 0.0) 本文部分idea 转自:http://blog.csdn.net/collonn/article/details/20128205 0.1) 本文仅针对性地分析AVL树的 ...
- 请不要把‘通知的观察者注册’放在-viewWillAppear:中
接手项目二次开发的吐槽: 接手别人的代码的悲哀之一就是,我反复的把流程走了一遍又一遍,却始终无法发现原来是这个问题. 之前这个人把通知的观察者注册放在了-viewWillAppear:中,导致,我发送 ...
- APICloud框架—db数据库模块
db数据库模块 db 模块封装了手机常用数据库 sqlite 的增删改查语句,可实现数据的本地存储,极大的简化了数据持久化问题,本模块已支持同步接口. 官方文档地址 打开/新建一个数据库 functi ...
- TaintDroid简介
1.Information-Flow tracking,Realtime Privacy Monitoring.信息流动追踪,实时动态监控. 2.TaintDroid是一个全系统动态污点跟踪和分析系统 ...
- 《算法4》读书笔记 1.4 - 算法分析（Analysis of Algorithm）
--------------------------- First priority is to make you code ** CLEAR and CORRECT, but PERFORMANCE ...
- 更改oracle字符集
修改oracle字符集 方法/步骤 oracle数据库的字符集更改 A.oracle server 端 字符集查询 select userenv('language') from dual 其中 ...
- mybatis插入List集合数据
处女帖 今天做完一个定时任务将一个表中的数据每天统计到另外一个表中,开始是用循环的方式向数据库添加,觉得数据库可能访问压力过大,所以就使用了mybatis的foreach标签来稍微的减少压力. 首先封 ...