Ajax

Asynchronsous Javascript and XML(异步Javascript和XML)。

Ajax 是一种无需重新加载整个页面的情况下,更新局部页面的技术。

不是指一种单一的技术,是利用了一系列技术:Javascript + XMLHttpRequest + css + 服务器端的集合。

http请求

get请求

主要用于获取数据,因为在url中连接参数,并且容量很低,相对来讲不安全。

post请求

主要用于上传数据,因为会封装在请求报文中,安全性一般,容量几乎无限。

Javascript Ajax

首先查看一下在Javascript中如何使用Ajax请求

<input type="button" value="读取txt" id="btn" />
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function () { //1、创建Ajax对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //ie6以上、frefox 等
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6
} //2、连接服务器
xhr.open("get", "price.txt?time=" + Date.parse(new Date()), true); //get请求,url地址,是否异步
//使用get请求时,要加一个时间戳来让每次请求都不一样,否则当目标页面发生变化时,浏览器会缓存 xhr.setRequestHeader("If-Modified-Since", "0"); //或者不使用时间戳 设置请求头为不缓存 //3、发送请求
xhr.send(null); //为了兼容写上null     /* post方式  
xhr.open("post", "price.txt", true); //post  
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //添加HTTP请求头
xhr.send("name=bai&last=wei"); //发送数据到服务器  
*/ //4、接收返回值  
//异步使用XMLHttpRequest对象时,必须使用onreadystatechange事件,并检查readyState属性,看是否完成请求
xhr.onreadystatechange = function () { //当readyState 改变时就会触发onreadystatechange 事件
//readyState共有4个状态:0(未初始化),1(正在载入),2(载入完成),3(开始解析),4(请求完成)。
//status代表请求结果,返回http状态码,如:200 代表成功, 404 找不到页面
if (xhr.readyState == 4 && xhr.status == 200) {
document.write(xhr.responseText); //服务器相应并非XML时 使用responseText属性。       document.write(xhr.responseXML); //服务器相应为XML时 而且需要XML对象进行解析 使用responseXML属性。 return false;
}
}
}
</script>

XMLHttpRequest常用方法

abort() 取消请求

setRequestHeader() 设置请求头

getAllResponseHeaders() 获取http响应头整个列表

getResponseHeader('key') 获取指定http相应头

注意事项

Ajax只能向同一个域名中的相同端口号、相同协议的url发起请求,不可以跨域,否则会引发错误。

为了浏览器兼容 get请求send最后传递null参数。

get请求时 最好使用encodeURIComonent()进行编码,否则某些浏览器下无法获取值。

解析Json格式时 eval("("+json+")"),但有安全性问题。

Jquery Ajax

使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象,  判断请求状态, 编写回调函数等.

Jquery提供了几个用于发送Ajax请求的函数,包括load、get、getJSON、post、Ajax。其中Ajax是核心方法,其他方法只是他的一个简化调用。

一、load(url,[data],[callback])

load()方法可以将远程的一个页面加载到当前DOM中。

默认使用get方式,如果传递了data参数则使用post方式。

可以使用选择器选择将部分内容载入。

<div id="container"></div>
<input type="button" value="loadGet" id="loadGet" />
<input type="button" value="loadPost" id="loadPost" />
<input type="button" value="loadCallBack" id="loadCallBack" />
<input type="button" value="loadFiltHtml" id="loadFiltHtml" />

添加点击事件

$(function(){
//get方式请求 注意时间戳 否则浏览器缓存
$("#loadGet").click(function(){
$("#container").load("abc.aspx?time=" + Date.parse(new Date()));
}); //post方式请求
$("#loadPost").click(function(){
$("#container").load("abc.aspx",{
id:12,
name:'david'
});
}); //发送post请求,并调用回调函数
$("#loadCallBack").click(function(){
$("#container").load("abc.aspx",{
id:12,
name:"david"
},function(responseText,textStatus,XMLHttpRequest){
//responseText 返回的字符串
//textStatus 请求状态
//XMLHttpRequest 对象
alert(responseText + "," + textStatus + "," + XMLHttpRequest);
});
}); //发送get请求,只获取id为targetContent的内容
$("#loadFiltHtml").click(function(){
$("#container").load("abc.aspx?time=" + Date.parse(new Date()) + " #targetContent")
});
});

注意 load不可以跨域 如load("http://www.baidu.com/") 报错。

二、$.get(url,[data],[callback],[type])

get()方法的参数可以在路径中拼接

$.get("abc.aspx?id=1&name=3&time=" + Date.parse(new Date()))

也可以在参数中指定,两种效果相同。

$.get("abc.aspx",{id:1,name:"3"});

type参数用于设置返回的数据类型,可以是xml,html(默认),script,json,jsonp,text

$("#btn").click(function(){
$.get("abc.aspx",{id:1,name:"3"},function(data,textStatus){
alert(data + "," + textStatus); //data返回的数据,textStatus状态码
},"html");
});

三、$.getJSON(url,[data],[callback])

通过HTTP GET请求 载入 JSON 数据,等同于$.get(url,[data],[callbak],"json")。

什么是JSON呢?

JSON是一个标准,就像XML一样,JSON规定了对象以什么样的格式保存为一个字符串,将复杂对象序列化为一个字符串,在浏览器端再将字符串反序列化为javascript可以读取到对象。

数据使用键值对存储 "key":"value",使用逗号分割 "key1":"value1","key2":"value2"。使用花括号保存对象 lala:{"name":"value","name":123}

在C#中使用JSON

C#将.NET对象序列化为Javascript字符串的方法:JavaScriptSerializer().Serialize(p),JavaScriptSerializer在System.Web.Extensions.dll中,是3.0新增的类。

建立一个hanlder文件。

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<value> lists = new List<value>();
lists.Add(new value(, "嘉文", ));
lists.Add(new value(, "盖伦", ));
lists.Add(new value(, "赵信", ));
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
var jsonData = js.Serialize(lists);
context.Response.Write(jsonData);
}
public class value
{
public value(int id, string name, int age)
{
this.id = id;
this.name = name;
this.age = age;
}
public int id { get; set; }
public string name { get; set; }
public int age { get; set; }
}

在页面上异步获取JSON

<button type="button" class="btn btn-primary" id="getJSON">getJSON</button>
<script>
$("#getJSON").click(function () {
$.getJSON("Handler1.ashx?r=" + Math.random(), function (data, textStatus) {
var json = eval(data); //使用eval解析JSON
for (var i = 0; i < json.length; i++) {
console.log(json[i].name);
}
});
});
</script>

浏览器返回数据如下:

[{"id":1,"name":"嘉文","age":18},{"id":2,"name":"盖伦","age":28},{"id":3,"name":"赵信","age":38}]

四、$.getScript(url,[callbak])

通过 HTTP GET 请求载入并执行一个 JavaScript 文件,相当于 $.get(url, null, [callback], "script")

<button type="button" class="btn btn-primary" id="getScript">getScript</button>
<button type="button" class="btn btn-primary" id="getScriptCross">跨域调用</button> <script type="text/javascript">
//调用同站点内的js文件
$("#getScript").click(function () {
$.getScript("bootstrap3.34/js/bootstrap.js", function (data, textStatus) {
alert(this.url); //返回调用路径
});
}); //跨域调用js文件
$("#getScriptCross").click(function () {
$.getScript("http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js", function (data, textStatus) {
alert(this.url); //返回调用路径
});
});
</script>

五、$.post(url,[data],[callback],[type])

通过远程 HTTP POST 请求载入信息,具体操作和get()请求一样,只是换了个$.post。

六、$.ajax( options )

ajax方法是Jquery Ajax 的底层实现,返回其创建的XMLHttpRequest对象,该方法只有一个参数 key/value 对象。

<button type="button" class="btn btn-primary" id="Ajax">Ajax</button>
<script>
$("#Ajax").click(function () {
$.ajax({
url: "Handler1.ashx",
type: "get", //默认get
timeout: "1000", //超时时间毫秒
async: true, //默认true异步
beforeSend: function () { //发送请求前执行
alert("发送请求前执行!");
},
cache: false, //不缓存
complete: function (responseText, textStatus) { //请求成功或失败均调用,可以进行一些判断
alert(responseText);
},
contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded 默认这个报文头 表单
data: { id: 1, name: "嘉文" },
dataType: "html", //返回类型
error: function (e) {
alert(e); //返回错误信息
},
global: true, //默认true 是否触发全局AJAX事件
success: function (data, textStatus) { //请求成功后的回调
alert(textStatus);
alert(data);
}
})
});
</script>

七、AJAX相关函数

1、$.ajaxSetup( options )

设置全局AJAX默认 options 选项。

ajax方法的所有属性都可以在此进行设置,设置完毕后,就可以进行调用无参的get()、post()等方法发送请求。

如果在调用时,指定了某些属性,将优先使用该属性,不会冲突。

$.ajaxSetup({
url: "index1.html",
global: false,
type: "post",
success: function (data) {
alert(data);
}
});

$("#test").click(function(){
  $.post(); //会发送到index1.html
});
$("#btn").click(function () {
$.get("index3.html"); //使用自定义的url 其他用默认的
});

2、serializer()

有些时候,我们需要异步提交表单,这是需要自己手动输入所有参数,使用serializer()方法可以自动将表单上的元素进行拼接,返回一个参数字符串。

html代码

<form class="form-horizontal" role="form" style="margin-top:100px;" id="form1">
<div class="form-group">
<label class="col-lg-2 control-label">用户名:</label>
<div class="col-lg-8"><input type="text" name="userName" placeholder="请输入用户名" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">
密码:
</label>
<div class="col-lg-8">
<input type="password" name="passWord" placeholder="请输入密码" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-8">
<button type="button" class="btn btn-default" id="login">登陆</button>
</div>
</div>
</form>

以前你要这么做

$("#login").click(function () {
$.post("login.ashx", { userName: $("input[name='userName'").val(), passWord: $("input[name='passWord'").val() }, function () {
//location.href='index.html';
});
});

使用方法

$("#login").click(function () {
$.post("login.ashx", $("#form1").serialize(), function () {
//location.href='index.html';
});
});

自动拼接的参数:userName=123123&passWord=123

3、serializeArray()

该方法返回JSON对象。

$("#login").click(function () {
var objs = $("#form1").serializeArray();
var str = JSON.stringify(objs); //将json转换为字符串
document.write(str);
});

运行结果

[{"name":"userName","value":"123123"},{"name":"passWord","value":"asd"}]

八、JSONP

JSON with Padding是json的一种使用模式,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

注意 url?jsoncallback=? Jquery会自动将?编译为正确的函数名来执行回调函数。

$("#btn").click(function () {
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function (data) {
for (var i = 0; i < data.length; i++) {
alert(data[i]);
}
});
});

对应的$.ajax方法查询手机归属地

<p>请输入手机号<input type="text" id="tel" /></p>
<p>归属地:<span id="province"></span></p>
<p>运营商:<span id="operators"></span></p>
<button type="button" id="btn">查询</button>
<script>
$("#btn").click(function () {
$("#province").html("");
$("#operators").html("");
var tel = $("#tel").val();
$.ajax({
type: "get",
url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" + tel,
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
$("#province").html(data.province);
$("#operators").html(data.catName);
},
error: function (e) {
alert(e);
}
});
});
</script>

29、Jquery Ajax的更多相关文章

  1. 二、jQuery Ajax请求

    一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...

  2. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  3. C# WebClient、jQuery ajax jsonp实现跨域

    WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...

  4. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  5. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  6. jquery ajax传递多个对象或数组到后台

    1.js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化. 2.Jquery   $.ajax方法的配置 针对$.ajax方法的配置参数需要进行修改: 1) ...

  7. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  8. jQuery Ajax 方法调用 Asp.Net WebService 以及调用aspx.cs中方法的详细例子

    一.jQuery Ajax 方法调用 Asp.Net WebService (引自Terry Feng) Html文件 <!DOCTYPE html PUBLIC "-//W3C//D ...

  9. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

随机推荐

  1. 【java并发】线程同步工具Semaphore的使用

    Semaphore通常用于限制可以访问某些资源(物理或逻辑的)的线程数目,我们可以自己设定最大访问量.它有两个很常用的方法是acquire()和release(),分别是获得许可和释放许可.  官方J ...

  2. 力控ADO组件数据源设置

    1.mysql的ODBC驱动如何下载及安装 地址:http://dev.mysql.com/downloads/connector/odbc/5.1.html Mysql跟力控ado进行交互 第一步: ...

  3. Navicate使用注意事项

    2.      Navicat如何连接数据库:点击连接——>输入连接名,然后如果是本机不用更改localhost,如果是别的主机,要将对方 的ip地址输入,端口号3306不变,用户名root,密 ...

  4. [LeetCode] Burst Balloons (Medium)

    Burst Balloons (Medium) 这题没有做出来. 自己的思路停留在暴力的解法, 时间复杂度很高: 初始化maxCount = 0. 对于当前长度为k的数组nums, 从0到k - 1逐 ...

  5. C++ STL 算法精选之查找篇

    1.查找类算法 adjacent_find(first,last); 查找区间[first,last)内第一次出现连续的两个相等的元素,并返回指向第一个元素的迭代器,连续元素之间的比较,默认是== a ...

  6. How to Create a SharePoint 2010 Project Without SharePoint Server

    转:http://community.bamboosolutions.com/blogs/sharepoint-2010/archive/2012/06/21/create-a-sharepoint- ...

  7. 使用VisualStudio进行单元测试之一

    使用VisualStudio中的单元测试功能,可以很方便的创建单元测试项目.编写单元测试代码以及执行单元测试.而如何在VisualStudio中使用单元测试功能,就是本文和后面几篇想要说的了.    ...

  8. Bzoj 1976: [BeiJing2010组队]能量魔方 Cube 最小割,最大流

    1976: [BeiJing2010组队]能量魔方 Cube Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 879  Solved: 304[Submi ...

  9. 一步一步写一个简单通用的makefile(一)

    经常会用写一些小的程序有的是作为测试,但是每次都需要写一些简单的GCC 命令,有的时候移植一些项目中的部分代码到小程序里面进行测试,这个时候GCC 命令并不好些,如果写啦一个比较常用的makefile ...

  10. eclipse安装Hadoop1.1.2版本开发插件

    Hadoop1.1.2版本没有直接适合Eclipse的安装插件,需要手动打包jar文件. 我的系统配置: VMware Workstation10 CentOS-6.5-i386 hadoop-1.1 ...