jQuery Ajax 学习(转)
Ajax全称:Asynchronous JavaScript and XML(异步的JavaScript和XML)
特点:在不必刷新整个网页的情况下实现局部更新,带来更好的用户体验。
因为XMLHttpRequest
(XHR)对象的出现才有了异步的概念。通过XMLHttpRequest
对象实现后台和服务器进行数据的交换而不必刷新整个页面。
概念介绍
- 运用HMTL和CSS来实现页面,表达信息。
- 运用XMLHttpRequest和Web服务器进行数据的异步交换。
- 运用JavaScript操作DOM元素,实现动态局部刷新。
实例化一个XHR对象
var request =new XMLHttpRequest();
对于IE6及更老版本的IE:
var request;
if(windows.XMLHttpRequest){
request=new XMLHttpRequest();//IE7+,Fiefix,Chrome,Opera,Safari...
}
else{
request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}
"HTTP请求"概念介绍
一个完整的HTTP请求过程,通常需要下面7个步骤:
- 建立TCP连接
- Web浏览器向Web服务器发送请求命令
- Web浏览器发送请求头信息
- Web服务器应答
- Web服务器发送应答头信息
- Web服务器向浏览器发送数据
- Web服务器关闭TCP连接
一个HTTP请求一般由四部分组成:
- HTTP请求的方法或者动作,Get/Post
- 正在请求的地址URL
- 请求头,包含一些客户端环境信息,身份验证信息等
- 请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息
GET与POST
GET
:一般用于信息获取
使用URL传递参数(变量会放在URL里边)
对所发送信息的数量也有限制,一般在2000个字符
幂等,执行N次与执行1次效果相同,都不会改变数据库的信息POST
:一般用于修改服务器上的资源
对所发送信息的数量无限制一个HTTP响应一般由三部分组成:
- 一个数字和文字组成的状态码,用来告诉客户端请求是成功还是失败
- 响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等
- 响应体,也就是响应正文,服务器传来的内容
HTTP状态码分类 | |
---|---|
分类 | 分类描述 |
1XX 信息 | 服务器收到请求,需要请求者继续执行操作 |
2XX 成功 | 操作被成功接收并处理,例如 200 OK |
3XX 重定向 | 需要进一步的操作以完成请求 |
4XX 客户端错误 | 请求包含语法错误或无法完成请求,例如 404 NOT FOUND |
5XX 服务器错误 | 服务器在处理请求的过程中发生了错误 例如 500 |
XHR发送请求
- open(method,url,async) async->true异步(默认)/false同步
- send(string)
例如:request.open("GET","get.php",true);
request.send();//因为GET请求内容一般在url中,所以send()可以为空,但是post请求需要在send()中添加信息
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头信息(一定是写在open()和send()中间)
request.send("name=王二狗&sex=男");
XHR取得响应
responseText
:获取字符串形式的响应数据responseXML
:获取XML形式的响应数据status
和statusText
:以数字和文本形式返回HTTP状态码getAllRespondseHeader()
:获取所有的响应报头getResponseHeader()
:查询响应中的某个字段的值监听
readyState
属性- 0:请求未初始化,open还没有调用
- 1:服务器连接已经建立,open已经调用了
- 2:请求已接收,也就是接收到头信息了
- 3:请求处理中,也就是接收到响应主体了
- 4:请求已完成,且响应已就绪,也就是完成响应了
var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4 && request.status===200){
//做一些事情request.responseText
}
}
举个栗子(基于之前的数据库,有学生表)~
【前端】
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#search").click(function() {
var request = new XMLHttpRequest();
request.open("GET", "/Ajax/Details?id=" + parseInt($("#keyWord").val()), true); //通过GET方法去请求AjaxController下面的Details方法,并传入id的值作为查询条件
request.send();
});
})
</script>
<label>请输入要查询的学生编号:</label>
<input type="text" id="keyWord"/>
<button id="search">查询</button>
【后端】AjaxController控制器Details方法
public ActionResult Details(int id)
{
if (dbContext.StudentSet.Find(id) == null)
{
return Content("Fail");
}
else
{
return Content("Success");
}
}
【结果】我的数据库中没有id为1的数据,有id为6的数据
JSON基础
简介 JSON: JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML,它采用键值对的方式来组织,易于阅读和编写,同时也易于机器解析和生成* JSON是独立于语言的,也就是说不管什么语言,都可以解析Json,只需要按照json的规则来就行
JSON与XML比较
- Json的长度和XML格式比起来很短小(减少带宽)
- Json读写的速度更快
- Json可以使用JavaScript内建的方法直接进行解析,转换成JavaScript对象,非常方便
JSON语法规则
- JSON数据的书写格式是:名称/值对
名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开,比如,"name":"郭靖" - JSON的值可以是下面这些类型:
- 数字(整型或浮点数),比如123,1.23
- 字符串(在双引号中)
- 逻辑值(true,false)
- 数组(写在方括号中)
- 对象(写在花括号中)
null
例如:
{
"staff":[
{"name":"宏碁","age":70},
{"name":"郭靖","age":35},
{"name":"黄蓉","age":30}
]
}
{
"nane": "los",
"success": "True",
"message": "请求成功",
"info": [{
"name": "laosiji",
"age": "100",
"asdas": "121",
"hobby": ["daqiu", "youyong"],
"aa": [{
"anme": "aa",
"age": 20
}, {
"aa": "asdas",
"age": 5565
}]
}]
}
`JSON解析
方式一:
var jsondata='{"staff":[{"name":"黄蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=eval('('+jsondata+')'); //如果在json数据中存在js脚本的话会直接执行。(危险)
alert(jsonobj.staff[0].name);方式二
var jsondata='{"staff":[{"name":"黄蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=JSON.parse(jsondata); //如果在json数据中存在js脚本的话会报错(常用,安全,方便)。
alert(jsonobj.staff[0].name);在线JSON格式化和校验工具jsonlint
用jQuery实现Ajax
- jQuery.ajax({[settings]}) $.ajax([{settings]})
- type:Method类型,"POST"或者“GET”,默认为“GET”
- url:发送请求的地址
- data:一个对象,连同请求发送到服务器的数据
- dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,一般我们采用json格式,可以设置为“json”
- success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功的字符串
- error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象
例如
GET$.ajax({格式设置,注意success和error返回的数据是不同的})POST
跨域
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或c.a.com域名下的对象。
处理跨域的方法一:代理
处理跨域方法二:JSONP
处理跨域方法三:XHR2
jQuery Ajax 学习(转)的更多相关文章
- Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...
- jQuery Ajax学习
地址:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
- WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
- Jquery重新学习之七[Ajax运用总结A]
Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...
- (高级篇)jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jQuery学习之jQuery Ajax用法详解(转)
[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...
- Jquery+Ajax+php学习笔记
昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery- ...
- jQuery的ajax学习
jQuery是一个非常常见的JavaScript库,可是,突然发现其实自己大多数时候,潜意识里面对它其实是视而不见的,比如它的ajax,不是没用过,每次使用,要不,是直接套用已有的格式,要不直接从官网 ...
随机推荐
- luogu P1938找工就业
一头牛在一个城市最多只能赚D元,然后它必须到另一个城市工作.当然它可以在别处工作一阵子后,又回到原来的城市再最多赚D美元.而且这样的往返次数没有限制城市间有P条单向路径,共有C座城市,编号1~C,奶牛 ...
- 完全背包【p1832】A+B Problem(再升级)
Description 给定一个正整数n,求将其分解成若干个素数之和的方案总数. Input 一行:一个正整数n Output 一行:一个整数表示方案总数 素数之和 ? 背包啊. 没一遍切的题都不是水 ...
- LCA【SP913】Qtree - Query on a tree II
Description 给定一棵n个点的树,边具有边权.要求作以下操作: DIST a b 询问点a至点b路径上的边权之和 KTH a b k 询问点a至点b有向路径上的第k个点的编号 有多组测试数据 ...
- cogs p服务点设置
5. P服务点设置 ★★ 输入文件:djsc.in 输出文件:djsc.out 简单对比时间限制:2 s 内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇建立 ...
- Proxy(2016山东省省赛C)(最短路)(spfa)
问题 C: Proxy 时间限制: 2 Sec 内存限制: 128 MB提交: 17 解决: 5[提交][状态][讨论版] 题目描述 Because of the GFW (Great Firew ...
- [BZOJ 1789] Necklace
Link: BZOJ 1789 传送门 Solution: 感觉$n\le 50$可以随便乱搞啊…… 这里我是先找到3条链的失配位置,再找到这之后其中2条链最远的失配位置,统计即可 Code: #in ...
- bzoj 2660: [Beijing wc2012]最多的方案
Time Limit: 5 Sec Memory Limit: 128 MB Submit: 617 Solved: 361[Submit][Status][ ...
- Java高级架构师(一)第24节:加入ehcache,把工程加入到Git
ehcache的maven配置: <!-- ehcache的jar --> <dependency> <groupId>net.sf.ehcache</gro ...
- Python的编码注释# -*- coding:utf-8 -*-
# -*- coding:utf-8 -*-的主要作用是指定文件编码为utf-8, 因为一般默认的是ASCII码,如果要在文件里面写中文,运行时会出现乱码,加上这句之后会把文件编码强制转换为utf-8 ...
- hdu4565之矩阵快速幂
So Easy! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...