Ajax与JSON

最新推荐文章于 2024-09-03 15:34:00 发布

凌北辰

最新推荐文章于 2024-09-03 15:34:00 发布

阅读量541

点赞数

分类专栏：前端文章标签： ajax json 服务器

本文链接：https://blog.csdn.net/liustreh/article/details/122228466

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Ajax与JSON

一、Ajax简介

Asynchronous Javascript And Xml[异步javascript和xml]，在传统的Web开发中,与服务器进行通信主要是通过同步请求的方式(即刷新页面)来实现,如果同步请求的次数过于频繁,就会产生大量无用、重复的数据占用带宽。

Ajax完全摒弃了这种信息交互方式,它通过XMLHttpRequest组件,在不需要刷新页面的情况,与服务器保持异步通信和联系,服务器根据需要进行最小化响应,而不是完整页面的重复发送。

同步：浏览器发送一个请求到服务器端，网址会改变，页面会被重新加载到浏览

异步：浏览器发送一个请求到服务器端，网址不会改变，并且页面只是局部刷新页面。Ajax使用异步的方式从浏览器发送请求，请求服务器端资源，并获得内容。

二、XMLHttpRequest

XMLHttpRequest对象用于与服务器交换数据。所有的浏览器都聚有内置的XMLHttpRequest对象。XMLHttpRequest使用异步的方式来与服务器交换数据，这使的我们可以只更新网页中需要更新的部分，就不需要更新整个网页。

在客户端与服务器进行通信前，首先实例化一个XMLHttpRequest对象。

语法如下：

var  httpRequest = new  XMLHttpRequest();

在使用XMLHttpRequest对象时，不允许跨域访问的，也就是说，只能访问自己站点内的文件。例如，www.sina.com.cn 站点中的文件不能去调用www.tom.com网中的文件。

常用方法：

方法名	说明	参数
Open(method,url,asyns)	规定请求类型，URL以及是否异步处理请求	参数：method 发送的请求类型，get或是post url 请求的文件 asyns true为异步，false时为异步
Send()	将请求发送到服务器用于get请求
Send(String)	将请求发送到到服务器	参数String ：传递值=值对，只用于post请求
about()	取消当前的请求
getAllResponseHeaders()	返回标题信息
getResponseHeader()	返回特定的标题信息
setRequestHeader(header, value)	将Http标头设置为请求	header：指定标头名称 value:指定标头

onreadystatechange事件

当请求由XMLHttpRequest对象发送到服务器后，服务器会做出响应。

当服务器的响应后，XMLHttpRequest对象的readyState属性就会发生改变，当此属性改变时就会触发此事件。readyState属性保存的是XMLHttpRequest对象的状态信息。

XMLHttpRequest对象的三个重要属性

onreadystatechange属性：他的值是一个函数，每当readState发生改变时，就执行这个属性指定的函数

readyState属性：此属性中保存有XMLHttpRequest的状态信息。共有五种状态。

0.请求未初始化

1.服务器连接已建立

2.请求已接收

3.请求处理中

4.请求已完成，且响应已经就绪

Status属性：值为200时，找到了请求页面，请求成功。

值为404时，未找到页面。

其它属性

responseText：以字符串形式返回响应数据

responseXML：将响应数据作为XML数据返回

statusText：返回状态文本（例如，“OK”或“NOT Found”）

XMLHttpRequest对象对新旧浏览器的创建方式也不一样，具体创建方法如下

var  httpRequest;
if (window.XMLHttpRequest) {
    // 目前主流的浏览器(Chrome, Mozilla, Safari, IE7+, ...)
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // <= IE 6 或早期IE版本
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

三、Ajax使用实例

1.get请求

var  httpRequest = new  XMLHttpRequest();
httpRequest.open("GET", "ajax_get.jsp", true);//这句可能返回缓存中的数据
                                    //建议用下面的语句
httpRequest.open("GET","ajax_get.jsp?r="+ Math.random(), true);//加入一随机数次url都不一样，这样可保证不会返回缓存中的数据。
httpRequest.send(); //上面写好后，用send方法发到服务器。 

当使用Get请求时url中在？号后面可以加入参数。
httpRequest.open("GET", "ajax_get.jsp?name=zhangSan&sex=男", true);

2.post请求

httpRequest.open("POST", "ajax_post.jsp", true); //要请求的网页
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//配置http头
httpRequest.send("fname=Seagull&lname=Anna"); //要一起发送的参数和值
//上面写好后，用send方法发到服务器。

上面第二句中setRequestHeader()方法接受两个参数：

参数1：指定标题名称

参数2：指定标题值

3.回调函数

httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
 document.getElementById("divTable").innerHTML = this.responseText;
  }
};

4.总结使用步骤

(1) 创建XMLHttpRequest对象，要注意区分新旧浏览器

(2) 配置回调函数。

(3) 创建对服务器的请求，这里要注意是如果用post方式，那要配置http头。

(4) 配置http头

(5) send方法，把上面配置好的发送到服务器。

5.使用例子

//1.创建对象
var  httpRequest;
if (window.XMLHttpRequest) {
    // 目前主流的浏览器(Chrome, Mozilla, Safari, IE7+, ...)
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // <= IE 6 或早期IE版本
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} 
         //2.配置回调函数
httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
 document.getElementById("divTable").innerHTML = this.responseText;
  }
};
//3.配置请求
httpRequest.open("POST", "ajax_post.jsp", true); //要请求的网页 
//4.配置http头
ttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//配置http头
//5.发送
httpRequest.send("fname=Seagull&lname=Anna"); //要一起发送的参数和值

四、JQuery中Ajax的使用

1.load()方法从服务器读取文件信息

$(选择器).load(URL,data,callback);

参数1 URL为请求的地址

参数2 data为键值对数据，和url请求一起发送到服务器

参数3 为回调函数。服务器响应后在本地执行的函数。

回调函数有三个参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

$("#b2").click(function(){
  $("#div1").load("1.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

$.Get()方法

语法：$.get(URL,callback);

例子：

  $("#b3").click(function(){                                                $.get("kcQuery.jspname=zhangsan&password=12",function(data,status){
  alert("Data: " + data + "\nStatus: " + status);
 });
});

上面回调函数中有data和status两个参数.

data中是从服务器回传的数据。status是请求的状态。

3 $.Post()方法

语法：$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

例子：

 $("#b4").click(function(){
$.post("testPost.jsp?name=zhangsan&password=12",  //参数一
{"name":"张三","city":"北京"}, //参数二
 function(data,status){  //参数三，回调函数
  alert("Data: " + data + "\nStatus: " + status);
});
});
test_post.jsp的内容
<%
String  fname,city
fname=Request.Form("name")
city=Request.Form("city")
**Response.Write("****亲爱的****"** **+****fname** **+** **"****同学****")**
Response.Write("生活在"+ city + "这所城市中。")
%>

$.ajax() 方法

$.ajax({
　　　　url : 'user/checkUname', 　  <!-- url  :请求地址 -->  
　　　　type : 'post',　　　　　　　　<!--type ：请求类型:post/get --> 
　　　　data : {　　　　　　　　　　　<!--data ：发送给服务器的数据 -->    
　　　　　　　uUsername : u,　　　　<!-- 使用自己声明的对象 -->  
　　　　　　　uPwd : $("#pwd").val()　<! -- 直接获取页面的对象 -->  
　　　　　　},
　　dataType : 'json',    <!--dataType:服务器返回的数据类型 text/xml/script/html/json/jsonp -->
　　　　success: function(data){　　 <!--回调函数 -->     
　　　　　　console.log(data);    <! -- 浏览器控制台显示返回内容（建议使用） -->
　　　　　　alert(data);　　　　　  <! -- 弹框显示返回内容 -->
　　　　　　}
});