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是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
随机推荐
- 1.Java集合总结系列：Java集合概述
一.概述 集合是 Java 中非常重要的 API,在实际应用中非常广泛,在许多面试中也是必考的知识点. Java 所有集合类都位于 java.util 包下,Java 的集合只能保存对象,而无法保存保 ...
- 重写NSArray与NSDictionary的descriptionWithLocale方法
重写NSArray的descriptionWithLocale方法: NSArray+log.h #import <Foundation/Foundation.h> @interface ...
- macos系统下共语言gopath变量的设置
一.问题 在macos下安装golang开发环境,想更改gopath路径,通过export GOPATH=/Volume/E/go 在vscode中通过go env命令查看GOPATH还是原始默认的, ...
- png、jpg、gif三种图片格式的区别
png.jpg.gif三种图片格式的区别 2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...
- JavaScript学习总结 之对象
JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...
- oracle分区表的建立方法(包含已经存在的表要分区)分享，非常好
非原创 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Oracle的分区表可 ...
- 间谍网络——tarjan求SCC
洛谷传送门 看着这道题给人感觉就是tarjan求SCC,然而还得判断是否能控制全部间谍,这就得先从可以贿赂的点dfs一遍. 如果没有全部被标记了,就输出NO,再从没被标记的点里找最小的标号. 如果全被 ...
- C字符串输入输出函数
下面就几个常用的字符串输入输出函数做个小小的总结TAT 使用时添加头文件:#include<stdio.h>. scanf("格式控制字符串",变量地址列表):(pri ...
- Java多线程学习笔记（一）——Thread类中方法介绍
currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...
- 内嵌的Component调用外部的方法
如果一个内嵌的Component控件需要调用外部定义的方法,用outerDocument.方法名来调用,前提是该方法是public的.如:<mx:DataGridColumn headerTex ...