一、Ajax 二、JSON数据格式三、Ajax+Jquery 四、分页的实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、Ajax概述
###<1>概述

###<2>组成
以XMLHttpRequest为核心，发送Ajax请求和接收处理结果
以javascript为语言基础
以XML/JSON作为数据的传输格式
以HTML和CSS作为页面的渲染

###<3>作用
局部刷新
异步请求

###<4>作用流程
![](3.png)

###<5>实现步骤和核心的API
1. 创建XMLHttpRequest对象(浏览器的兼容性)
2. 调用open方法，创建一个ajax请求
3. 设定回调函数
onreadystatechange = 函数
5. 接收处理结果（判断请求和响应处理的状态）
responseText
responseXML
4. 调用send方法发送ajax请求

XMLHttpRequest:ajax引擎
open()：创建Ajax请求
注意get：可以得到缓存中的数据
在URL后面添加唯一的标识
open("GET","TimeServlet?id="+new Date(),true);

注意post:添加HTTP HEAD
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send()：发送Ajax请求
post请求时发送请求数据：k=v&k1=v2&...
get请求时直接调用无参send()方法

onreadystatechange：绑定Ajax请求的回调函数
readyState属性值发生变化时，回调指定的回调函数

readyState ：Ajax请求处理的状态
请求未初始化： readystate = 0
请求正在发送： readystate = 1
发送完毕： readystate = 2
响应中： readystate = 3
响应完成： readystate = 4

status ：服务器处理后HTTP CODE 状态码。
status=200 响应完成
status=404 资源找不到
status=500 服务器端发生错误

responseText ：封装了服务器处理的字符串结果数据
responseXML ：封装了服务器处理的XML结果数据
服务器响应的数据类型
String(JSON)
XML

# 二、JSON数据格式
###<1>概念
和语言没有关系的一种数据交换格式

实现前端和后台的数据交互

###<2>语法格式
对象：｛｝
对象数组：[{},{},{}]
属性和内容：key:value , key2:value2 ,...

###<3>解析json数据
在js中直接可以处理json对象

###<4>json转换
客户端 :处理json对象,可以直接操作
将json字符串转换成json对象
var jsonObj = JSON.parse(jsonStr)
var jsonObj = eval( "("+ jsonStr +")");

服务器：
1.json对象转换成json字符串
借助第三方的工具包
JSONObject :将一个java对象转换成JSON对象，从JSON中获取json字符串
JSONObject obj = JSONObject.fromObject(java对象);
String str = obj.toString();

JSONArray :将一个java数组对象转换成JSON数组对象，从JSON数组对象中获取json字符串
JSONArray objArr = JSONArray.fromObject(java数组对象);
String str = objArr.toString();

2.json字符串转换成java对象
借助第三方的工具包

# 三、Jquery+Ajax
###<1>Jquery概念
对JS进行封装，简化代码量，js的框架
write less do more

###<2>使用步骤
1. 下载jquery.js脚本文件,添加到web项目（jquery.js / mini-jquery.js）
2. 在需要使用jquery的页面中，使用<script src=“url”></script>
3. 使用jquery进行各种操作

###<3>实践：登陆异步用户名校验
方式一：$.get(列数列表)

参数列表：url,[data],[callback],[type]
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

方式二：$.post(列数列表)

方式三：$.ajax(列数列表)

参数列表：
｛
async:是否异步，true
data:待发送 Key/value 参数。
dataType:指定服务器返回的响应数据的类型。
type:请求的方式。
success：响应成功后要执行的代码块，成功的回调函数
error: 响应失败的错误页面的回调函数
url：请求服务器的地址
｝

例如：
$.ajax(
{ async:true,
data:"username="+obj.value,
dataType:"json",
success:function(data){
if(data.result==1){
document.getElementById("span").innerHTML = "用户名可以使用";
}else{
document.getElementById("span").innerHTML = "用户名以存在";
}
},
type:"POST",
url:"CheckUsername",
error:function(){
alert("错误");
}
}
);

# 四、分页

一、Ajax 二、JSON数据格式三、Ajax+Jquery 四、分页的实现的更多相关文章

Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...
ajax使用json数据格式--无效的 JSON 基元
ajax使用json数据格式提交一开始这么写的 var flobj = { UserId: userid, ForbidSDT: ForbidSDT, ForbidEDT: ForbidEDT } ...
js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...
margin标记可以带一个、二个、三个、四个参数，各有不同的含义。
margin标记可以带一个.二个.三个.四个参数,各有不同的含义. margin: 20px;(上.下.左.右各20px.) margin: 20px 40px;(上.下20px:左.右40px.) ...
{Django基础九之中间件} 一前戏二中间件介绍三自定义中间件四中间件的执行流程五中间件版登陆认证
Django基础九之中间件本节目录一前戏二中间件介绍三自定义中间件四中间件的执行流程五中间件版登陆认证六 xxx 七 xxx 八 xxx 一前戏我们在前面的课程中已经学会了 ...
{ MySQL基础数据类型}一介绍二数值类型三日期类型四字符串类型五枚举类型与集合类型
MySQL基础数据类型阅读目录一介绍二数值类型三日期类型四字符串类型五枚举类型与集合类型一介绍存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己 ...
Ajax，Json数据格式
同步和异步同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事 ...
Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据
前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...
python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾基于对象的跨表查询正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询反向查询:关联属性在A表中,所以B对象找A对象,反向查询一对多: 按字段:xx book ----- ...

随机推荐

Sql Server tempdb原理-缓存机制解析实践
Tempdb就像Sqlserver的临时仓库,各式各样的对象,数据在里面进行频繁计算,操作.大量的操作使得tempdb可能面临很大压力,tempdb中缓存的设计就是为了缓解这些压力.这次就为大家介绍下 ...
在类库项目中使用log4net(RollingFileAppender)记录日志
1.创建解决方案 2.创建类库项目 3.根据需要修改命名空间,修改(和/或)添加类到类库 4.引用log4net 5.类库项目根目录下创建leg4net配置文件,如D3CallTriggerPlugi ...
如何通过 GT 快速开始性能测试？
http://gt.tencent.com/docs/a/2.1/GTAndroidQuickStart.pdf Summary 安装 GT(GT.apk)后,不需要连接 PC 和在被测应用中插入代码 ...
js 全选反选
1.全选 function selectAll(form){ for (var i = 0; i < form.elements.length; i++) { if (form.elements ...
openresty 前端开发轻量级MVC框架封装一（控制器篇）
通过前面几章,我们已经掌握了一些基本的开发知识,但是代码结构比较简单,缺乏统一的标准,模块化,也缺乏统一的异常处理,这一章我们主要来学习如何封装一个轻量级的MVC框架,规范以及简化开发,并且提供类似p ...
Spring Bean的生命周期相关博客
最近得面试题一直问 Spring 得生命周期,鉴于自己还未阅读过源码所以只能是自己背一波了.属实不懂硬背得作用,但是无奈被各位面试官打败了.等以后有时间了一定要阅读几遍spring的源码有 ...
leetcode208
class TrieNode { public: // Initialize your data structure here. TrieNode() { words=; prefixs=; ;i&l ...
学习笔记之JavaScript
JavaScript 教程 | 菜鸟教程 http://www.runoob.com/js/js-tutorial.html JavaScript 是 Web 的编程语言. 所有现代的 HTML 页面 ...
Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
Android编译系统简要介绍【转】
本文转载自:http://blog.csdn.net/luoshengyang/article/details/18466779 在Android源码环境中,我们开发好一个模块后,再写一个Androi ...