一、Ajax简介
1️⃣什么是Ajax
- Ajax即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
- Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。
- Ajax 是一种用于创建快速动态网页的技术。
- Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
2️⃣Ajax的作用
Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,部分更新。
3️⃣Ajax的好处
- 减轻服务器负担,按需要获得数据
- 无刷新更新页面,减少用户实际和心理的等待时间
- 只更新部分页面,有效利用带宽
- 主流浏览器都支持Ajax
二、JS方式Ajax的实现
JS的Ajax:出现最早,使用一个对象XmlHttpRequest对象。专门用于进行Ajax请求发送,和响应的接收使用Ajax发请求,使用Ajax接收响应,使用JS进行页面刷新。
存在的缺点:
- 若使用JS的Ajax技术,为了实现简单功能,需要书写大量复制代码
- JS的Ajax代码,浏览器兼容性比较差
1️⃣发送 Ajax 请求的五个步骤
其实也就是 使用 XMLHttpRequest 对象的五个步骤。
- 请求的网址、请求方法get/post。
- 提交请求的内容数据、请求主体等。
- 接收响应回来的内容。
发送 Ajax 请求的五个步骤:
- (1)创建异步对象。即 XMLHttpRequest 对象。
- (2)设置请求的参数。包括:请求的方法、请求的url。
- (3)发送请求。
- (4)注册事件。onreadystatechange事件,状态改变时就会调用。如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
- (5)获取返回的数据。
2️⃣创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建XMLHttpRequest对象的语法:
var xmlhttp=new XMLHttpRequest();
复制代码
3️⃣向服务器发送请求
XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法。
方法 | 描述 | 参数 |
---|---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求 | method:请求的方式,GET或POST;url:请求路径;async:true(异步)或 false(同步) |
send(string) | 将请求发送到服务器 | string:请求参数,仅用于POST请求。格式:名1=值1&名2=值2 |
🍀GET请求
一个简单的GET请求:
xmlhttp.open("GET","DemoAJAXServlet",true);
xmlhttp.send();
复制代码
🍀POST请求
一个简单POST请求:
xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.send();
复制代码
如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头。然后在send()方法中填写发送的数据:
xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom&age=20");
复制代码
4️⃣服务器响应
获得来自服务器的响应,使用XMLHttpRequest对象的responseText或responseXML属性。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
复制代码
请求被发送到服务器时,需要执行一些基于响应的任务。每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 状态改变事件触发器,每当readyState属性改变时,就会调用该函数 |
readyState | 存有XMLHttpRequest的状态。从0到4发生变化。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪 |
status | 响应状态码。200: 成功;404: 未找到页面 |
在onreadystatechange事件中,当readyState等于4且状态为200时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
复制代码
5️⃣代码实现
//1.创建ajax核心对象XMLHttpRequest
var ajax = new XMLHttpRequest();
//2.与服务器建立连接
ajax.open("post","testAjax");
//3.设置请求头,如果请求方式为post,请求头必须设置
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.注册事件监听,监听服务器端对象状态的改变
//作用:服务器处理之后,响应客户端,通过此函数来接收响应的数据,此后在ajax中此函数被称为回调函数
ajax.onreadystatechange = function(){
//判断服务器对象的状态是否为完成状态
if(ajax.readyState == 4){ //4表示服务器完成
//判断服务器是否处理成功
if(ajax.status == 200){ //200响应状态码,表示处理成功
alert("响应回的数据:" + ajax.responseText);
}else {
alert("处理失败:" + ajax.status);
}
}
}
//5.发送请求
var name = document.getElementById("name").value;
ajax.send("name="+name);
复制代码
三、jQuery中的Ajax
1️⃣jQuery框架的Ajax简介
jQuery是一个优秀的JS框架,对JS原生的Ajax进行了封装。 与Ajax操作相关的jQuery方法在开发中经常使用的有三种:POST、GET、AJAX
2️⃣$.ajax()方法
.ajax()方法用于执行AJAX异步请求。所有的jQueryAJAX方法都使用 .ajax()方法用于执行AJAX异步请求。所有的jQuery AJAX方法都使用.ajax()方法用于执行AJAX异步请求。所有的jQueryAJAX方法都使用 .ajax()方法。该方法通常用于其他方法不能完成的请求。
语法:
$.ajax({name:value, name:value, ... })
复制代码
该参数规定AJAX请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值:
名称 | 值 | 描述 |
---|---|---|
async | Boolean | 表示请求是否异步处理。默认true |
beforeSend(xhr) | Function | 发送请求前运行的函数。 |
cache | Boolean | 表示浏览器是否缓存被请求页面。默认true |
complete(xhr,status) | Function | 请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后) |
contentType | String | 发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded” |
context | Object | 为所有AJAX相关的回调函数规定 “this” 值 |
data | Object,String | 规定要发送到服务器的数据 |
dataFilter(data,type) | Function | 用于处理XMLHttpRequest原始响应数据的函数 |
dataType | String | 预期的服务器响应的数据类型。text:返回纯文本字符串;json:返回JSON数据 |
error(xhr,status,error) | Function | 如果请求失败要运行的函数 |
global | Boolean | 规定是否为请求触发全局AJAX事件处理程序。默认true |
ifModified | Boolean | 规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认false |
jsonp | String | 在一个jsonp中重写回调函数的字符串 |
jsonpCallback | String | 在一个jsonp中规定回调函数的名称 |
password | String | 规定在HTTP访问认证请求中使用的密码 |
processData | Boolean | 规定通过请求发送的数据是否转换为查询字符串。默认true |
scriptCharset | String | 规定请求的字符集 |
success(result,status,xhr) | Function,Array | 当请求成功时运行的函数 |
timeout | Number | 设置本地的请求超时时间(以毫秒计) |
traditional | Boolean | 规定是否使用参数序列化的传统样式 |
type | String | 规定请求的类型(GET或POST) |
url | String | 规定发送请求的URL。默认是当前页面 |
username | String | 规定在HTTP访问认证请求中使用的用户名 |
xhr | Function | 用于创建XMLHttpRequest对象的函数 |
代码示例:
$.ajax({
url : "checkUsername",
type : "post",
dataType : "text",
data : "username="+$("#username").val(),
beforeSend : function(){
if($("#username").val()==""){
alert("用户名不能为空");
return false;
}
return true;
},
success : function(data){
alert(data);
}
});
复制代码
3️⃣$.get()方法
$.get()方法通过HTTP GET请求从服务器上请求数据。
语法:
$.get(URL,data,callback,type);
复制代码
参数解析:
- URL:请求的路径地址,必需项
- data:发送Key/value请求参数
- callback:请求成功后所执行的回调函数
- type:返回内容格式,xml, html, script, json, text, _default
代码示例:
$.get("checkUsername",{ username : $("#username").val() },function(data){
alert(data);
});
复制代码
4️⃣$.post()方法
$.post()方法通过HTTP POST请求从服务器上请求数据。
语法:
$.post(URL,data,callback,type);
复制代码
参数解析:
- URL:请求的路径地址,必需项
- data:发送Key/value请求参数
- callback:请求成功后所执行的回调函数
- type:返回内容格式,xml, html, script, json, text, _default
代码示例:
$.post("checkUsername",{ username : $("#username").val() },function(data){
alert(data);
});
复制代码
后记
本文以上呢为大家对Ajax简介与基本使用的相关知识进行介绍,首先对Ajax进行了简介(包含:什么是Ajax
、Ajax的作用
、Ajax的好处
),然后介绍了JS方式Ajax的实现
(包含发送 Ajax 请求的五个步骤
、创建 XMLHttpRequest 对象
、向服务器发送请求
、服务器响应
等),最后介绍了jQuery框架中的Ajax
(具体包含:jQuery框架的Ajax简介
、$.ajax()方法
、$.get()方法
、$.post()方法
等)。
希望本文的内容能够使你有所收获。