码迷,mamicode.com
首页 > Web开发 > 详细

Ajax 概述

时间:2019-01-19 21:15:37      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:响应   data   round   hit   stat   console   清空   row   The   

1.Ajax 概述

1.1.   Ajax 是什么

Ajax Asynchronous Javascript And XMLWEB应用程序开发的一种方法它使用客户端脚本与web服务器交互数据,并由最初的全局页面同步加载刷新升级为异步局部加载刷新方式动态刷新页面。

1.2.   Ajax 解决了什么问题

 

?     页面加载性能问题(刷新整个页面还是刷新局部页面?)

?     用户体验问题(页面加载速度快)

 

1.3.   Ajax 应用模型

传统的web同步模型(多个请求要顺序执行)。

技术分享图片

 

 

Ajax异步Web应用模型:(多线程并发,尽量减少客户端的阻塞)

技术分享图片

 

 

 

 

2.Ajax 编程实现

2.1.   Ajax 编程步骤

 

AJAX请求基本架构

技术分享图片

 

 

 

AJAX请求基本步骤

 

Step01:获取Ajax 请求对象(浏览器端的Ajax引擎提供)

Step02:设置Ajax对象的状态监听(通讯响应状态)

Step03:创建Ajax请求连接(与服务端建立连接

Step04:发送Ajax异步请求(发送到服务端)

 

 

 

2.2.   Ajax编程实现(了解)

2.2.1.  Ajax异步GET请求

通过ajax请求异步获取服务端日志信息,并局部刷新页面

 

Step01:设置dom状态监听

 

window.onload=function(){

doGetObjects();

console.log("hello ajax");

}//dom事件

 

Step02:定义事件处理函数通过ajax获取数据

 

function doGetObjects(){

//1.创建ajax请求对象(是实现ajax应用的一个入口对象)

var xhr=new XMLHttpRequest();

console.log(xhr);

//2.设置ajax对象的状态监听(响应是否结束)

xhr.onreadystatechange=function(){

//基于请求响应状态处理结果

//4表示服务端响应结束,200表示服务端响应OK(正确)

if(xhr.readyState==4&&xhr.status==200){

//responseText为服务端响应的文本

console.log(xhr.responseText);//string

doHandleResponseResult(xhr.responseText);

}

}

//3.发送ajax请求

doSendGetRequest(xhr)

}

 

发送GET请求

//发送GET请求

function doSendGetRequest(xhr){

//3.1.建立与服务端的连接

var url="doFindPageObjects.do?pageCurrent=1"

xhr.open("GET",url,true);//true表示异步(底层会启动工作线程)

//3.2.发送请求

xhr.send(null);//get请求此位置不传数据

}

 

数据处理函数定义

function doHandleResponseResult(resultStr){

//1.json格式的字符串转换json格式的JavaScript object

var result=JSON.parse(resultStr);

console.log(result);

//2.处理数据

if(result.state==1){

//将记录显示到tbody

doSetTableBodyRows(result.data.records);

}else{

alert(result.message);

}

}

 

显示数据方法定义

 

//tbody中显示记录信息

function doSetTableBodyRows(records){

//1.获取tbody对象,并清空内容

var tBody=document.getElementById("tbodyId");

tBody.innerHTML="";

//2.records数据追加tbody

for(var i=0;i<records.length;i++){//一条记录一个tr对象

//1.构建tr对象

var tr=document.createElement("tr");

//2.构建多个td对象,并追加到tr

doCreateTds(tr,records[i]);

//3.tr追加到tbody

tBody.appendChild(tr);

}

}

 

 

//创建当前的td对象

function doCreateTds(tr,row){

var td=document.createElement("td");

td.innerText=row.id;

tr.appendChild(td);

 

td=document.createElement("td");

td.innerText=row.username;

tr.appendChild(td);

 

td=document.createElement("td");

td.innerText=row.method;

tr.appendChild(td);

}

 

 

2.2.2.  Ajax 异步post请求

发送POST请求,可以将此方法替换发送GET请求的方法

 

function doSendPostRequest(xhr){

//3.1.建立与服务端的连接

var url="doFindPageObjects.do"

xhr.open("POST",url,true);//true表示异步(底层会启动工作线程)

//post请求必须设置此请求头

xhr.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

//3.2.发送请求

xhr.send("pageCurrent=1");//post请求此位置传数据

}

 

3.JQuery中的Ajax应用

 

3.1.   ajax 函数应用

juqery ajax函数用于向服务端发起一个异步的ajax请求.

 

例如:

 

$.ajax({ url: "address",

type:”GET”,

data: { param1: "foo bar", param2: "baz“ },

dataType: "json",

success: successHandlerFunction,

error: errorHandlerFunction,

cache: false,

})

 

Ajax 函数应用案例

 

$(function() {

$("#data-button-2").click(processAjaxRequest);

});

function processAjaxRequest () {

var params ={ param1: $("#field3").val(),param2: $("#field4").val() };

$.ajax({ url: "doFindPageObjects.do",

data: params,

success: function(result){

……..

} );

}

 

3.2.   load函数应用

jquery load函数一般用于某个位置异步加载某个

url页面,

语法:load(url,[data],[callback])

其中:

1)   url 表示远程一个地址

2)   data 表示要传递数据(key/value)

3)   callback 表示一个回调函数

 

例如:案例1

 

$("#time-result-1").load("listUI.do");

 

例如: 案例2

$("body").load("listUI.do",{color:red},function(){

…..

});

 

 

3.3.   getJson函数应用

JquerygetJSON函数用于向服务端发起Ajax GET请求

获取json格式的数据

语法:

$.getJSON("url",[data], [callback])

例如:

$.getJSON(“doFindPageObjects.do”,{pageCurrent:1},function(result){

//处理返回结果

})

3.4.   post 函数应用

POST方法为Jquery中的发送Ajax post请求的一种方法.

语法:post(url,[data],[callback])

例如:

$.post("doFindPageObjects.do",{pageCurrent:1},function(result){

…..

})

 

 

Ajax 概述

标签:响应   data   round   hit   stat   console   清空   row   The   

原文地址:https://www.cnblogs.com/wood-life/p/10293034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!