你的位置:首页 > Java教程

[Java教程]29、Jquery Ajax


Ajax

Asynchronsous Javascript and

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

不是指一种单一的技术,是利用了一系列技术:Javascript +

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.= new //ie6以上、frefox 等    } else {      xhr = new ActiveXObject('Microsoft.//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、接收返回值      //异步使用    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); //服务器相应并非      }    }  }</script>

abort() 取消请求

setRequestHeader() 设置请求头

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

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

注意事项

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

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

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

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

 

Jquery Ajax

使用原始Ajax, 我们需要做较多的事情, 比如创建

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,//responseText 返回的字符串      //textStatus 请求状态      //      alert(responseText + "," + textStatus + "," + //发送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参数用于设置返回的数据类型,可以是

$("#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是一个标准,就像

数据使用键值对存储 "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(1, "嘉文", 18));  lists.Add(new value(2, "盖伦", 28));  lists.Add(new value(3, "赵信", 38));  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 的底层实现,返回其创建的

<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"}]