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是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
随机推荐
- 关于View Link
当需要表格之间的父子结构的时候需要展示时,这个时候就需要建立View Link来实现Table之间的关联.在建立ViewLink时需要现将JDev关闭然后再进行创建自己需要的ViewLink.
- JavaWeb之cookie
什么叫做会话 ? 用户从打开一个浏览器开始,浏览器网站,到关闭浏览器的整个过程叫做一次会话! 每个用户与服务器进行交互的过程中,各自会有一些数据,程序要想办法保存每个用户的数据. 例如:用户点击超链接 ...
- python_原始_web框架
创:10_4_2017 修: 什么是web框架? -- 本质上是socket,用户请求来,业务逻辑处理,返回处理结果 -- 包含socket或者不包含socket的框架 什么是wsgi? -- web ...
- Python学习_ConfigParse （转）
1.基本的读取配置文件 -read(filename) 直接读取ini文件内容 -sections() 得到所有的section,并以列表的形式返回 -options(section) 得到该se ...
- 跟着刚哥梳理java知识点——基本数据类型（三）
1.8种基本数据类型 1)4种整数类型(byte.short.int.long) [知识点] 类型 存储空间 数值范围 byte 1字节=8位 -128-127 short 2字节 -2的15次方-2 ...
- Virtualbox 复制 CentOS 虚拟机无法联网
Centos刚装好后无法联网 复制虚拟机后,出现 No such device eth0 我们要处理的三个问题: 在Virtualbox上安装好Centos后如何联网 如何在Virtualbox上复制 ...
- 从零到实现Shiro中Authorization和Authentication的缓存
本文大纲 一.简介 二.缓存的概念 三.自定义实现缓存机制 四.什么是Ehcache 五.Ehcache怎么用 六.Spring对缓存的支持 七.Spring+Ehcache实现 八.Spring+S ...
- 51单片机I/O口直接输入输出实例（附调试及分析过程）
51单片机P0/P1/P2/P3口的区别: P0口要作为低8位地址总线和8位数据总线用,这种情况下P0口不能用作I/O,要先作为地址总线对外传送低8位的地址,然后作为数据总线对外交换数据: P1口只能 ...
- 【卸载】oracle卸载
Oracle卸载比较麻烦,不能简单卸载就完成了,有时没有卸载完整,下次安装不能很好的安装: 当然Oracle卸载也没有那么难,只是步骤比较多.Oracle10g还是Oracle11g卸载步骤都是一样的 ...
- 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...