JQuery Ajax工作原理_JQuery中Ajax调用

前端技术 - jQuery

一帘幽梦 2017-9-29 11:09:56

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

Ajax的原理

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

XMLHttpRequest是ajax的核心机制,它的属性有:

1)onreadystatechange 每次状态改变所触发事件的事件处理程序。

2)responseText 从服务器进程返回数据的字符串形式。

3)responseXML 从服务器进程返回的DOM兼容的文档数据对象。

4)status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

5)status Text 伴随状态码的字符串信息

6)readyState 对象状态值有:

  • 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
  • 1 (初始化) 对象已建立,尚未调用send方法
  • 2 (发送数据) send方法已调用,但是当前的状态及http头未知
  • 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
  • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

函数首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。

对于XmlHttpRequest的两个方法,open和send,其中open方法指定了:

  • a、向服务器提交数据的类型,即post还是get。
  • b、请求的url地址和传递的参数。
  • c、传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,而后一个是会覆盖前一个的,这个时候当然要指定同步方式。
  • Send方法用来发送请求。

知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

JQuery中AJAX调用


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
    font-size: 28px;
    line-height:1.7;
}
</style>    
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号:</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别:</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位:</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){ 
  $("#search").click(function(){ 
    $.ajax({ 
      type: "GET",    
      url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
      dataType: "json",
      success: function(data) {
        if (data.success) { 
            $("#searchResult").html(data.msg);
        } else {
            $("#searchResult").html("出现错误:" + data.msg);
        }  
      },
      error: function(jqXHR){     
        alert("发生错误:" + jqXHR.status);  
      },     
    });
  });
  $("#save").click(function(){ 
    $.ajax({ 
      type: "POST",   
      url: "serverjson.php",
      data: {
        name: $("#staffName").val(), 
        number: $("#staffNumber").val(), 
        sex: $("#staffSex").val(), 
        job: $("#staffJob").val()
      },
      dataType: "json",
      success: function(data){
        if (data.success) { 
            $("#createResult").html(data.msg);
        } else {
            $("#createResult").html("出现错误:" + data.msg);
        }  
      },
      error: function(jqXHR){     
        alert("发生错误:" + jqXHR.status);  
      },     
    });
  });
});
</script>
</body>
</html>
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验