同步交互与异步交互:ajax核心思想:异步交互
-
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
-
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
什么是ajax
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。 提升用户的体验。
为什么使用ajax
-
异步通信:使用JavaScript的XMLHttpRequest对象或现代的Fetch API与服务器进行异步数据交换,这意味着可以在不中断用户操作的情况下与服务器通信。
-
局部页面更新:通过JavaScript操作DOM(文档对象模型),只更新页面的某一部分,而不是整个页面。
-
数据格式:最初Ajax主要用于XML格式的数据交换,但随着技术的发展,现在更常用的是JSON格式,因为它更简洁,易于解析。
-
分离关注点:将数据和表示层分离,使得前端和后端可以独立开发和优化。
-
增强用户体验:通过异步加载数据和局部更新页面,可以减少等待时间,提供更流畅的用户体验。
-
支持多种数据交互模式:Ajax可以支持GET和POST请求,以及其他HTTP方法,允许开发者根据需要选择最合适的交互方式。
-
兼容性和跨浏览器支持:大多数现代浏览器都支持Ajax,使得Web应用程序可以在多种平台上运行。
-
安全性和性能考虑:虽然Ajax提供了许多好处,但也需要考虑安全性问题,比如跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。同时,过多的Ajax请求可能会影响服务器性能和页面加载时间。
AJAX常见应用情景
很多时候我们点击网站某个功能,比如注册功能,账号已经注册,密码位数太少,邮箱格式不对,就会局部刷新出一些提示:此账号已注册,密码不够安全,邮箱格式不对。然而局部刷新了一个部分,不是整个网页刷新。我当我们在百度中输入一个“白”字后,会马上出现一个下拉列表!列表中显示的是包含“白”字的关键字。 们就用到了Ajax技术。
-
整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
-
当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!
AJAX核心(XMLHttpRequest)
其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。
注意:
各个浏览器对XMLHttpRequest的支持也是不同的!
大多数浏览器都支持DOM2规范,都可以使用:
var xmlHttp = new XMLHttpRequest()
来创建对象;但IE有所不同,
IE5.5以及更早版本需要:
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
来创建对象;IE6中需要:
var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)
来创建对象;而IE7以及更新版本也支持DOM2规范。
ajax和服务端交互的一个过程
1、创建XMLHttpRequest对象
2、建立连接
3、发送请求
4、通过回调函数接收服务端的响应数据
AJAX的优缺点
优点:
-
AJAX使用Javascript技术向服务器发送异步请求;
-
AJAX无须刷新整个页面;
-
因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;
缺点:
-
AJAX并不适合所有场景,很多时候还是要使用同步交互;
-
AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
-
因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;
回调函数
回调函数是一种编程技术,它可以将一个函数作为参数传递给另一个函数,然后在另一个函数执行完毕后,再调用这个函数来处理结果。回调函数通常是通过函数指针来实现的,它可以用来实现异步操作或事件驱动的编程。回调函数的英文名是 callback,它是一种可执行的代码,可以被其他代码在特定的时机调用。
通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便.
$.ajax()
$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性:
语法:
$.ajax([设置参数]);
常用设置参数如下:
参 数 | 说 明 |
---|---|
String url | 发送请求的地址,默认为当前页地址 |
String type | 请求方式(POST或者GET,默认为GET) |
Number timeout | 设置请求超时时间 |
Object data 或 String data | 发送到服务器的数据 |
String dataType | 预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text |
function beforeSend(XMLHttpRequest xhr) | 发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象 |
function complete(XMLHttpRequest xhr,String ts) | 请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串 |
function success(Object result,String ts) | 请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串 |
function error(XMLHttpRequest xhr,String em,Exception e) | 请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象 |
boolean global | 默认为true,表示是否触发全局的AJAX事件 |
$.get()
$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:
$.get(url,data,success(resp,status,xhr),dataType)
参数说明:
参 数 | 说 明 |
---|---|
String url | 必选,规定将请求发送到呢个url |
Object data 或 String data | 可选,规定发送给服务器的数据 |
function success(Object result,String status,XMLHttpRequest xhr) | 可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象 |
String dataType | 预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text |
把$.ajax()的ajax请求修改为$.get()
$.post()
$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法,语法如下:
$.post(url,data,success(resp,status,xhr),dataType);
参 数 | 说 明 |
---|---|
String url | 必选,规定将请求发送到呢个url |
Object data 或 String data | 可选,规定发送给服务器的数据 |
function success(Object result,String status,XMLHttpRequest xhr) | 可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象 |
String dataType | 预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text |
JSON
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
JSON 语法:
-
数据在名称/值对中
-
数据由逗号分隔
-
花括号保存对象
-
方括号保存数组
var person = {"name":"zhangSan", "age":"18", "sex":"male"}; alert(person.name + ", " + person.age + ", " + person.sex);
注意:
key要在双引号中,不能使用单引号
字符串必须使用双引号表示,不能使用单引号
JSON值:
-
数字(整数或浮点数)
-
字符串(在双引号中)
-
逻辑值(true 或 false)
-
数组(在方括号中)
-
对象(在花括号中)
-
null
Ajax使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/*
参数:
1. 请求方式:GET、POST
* get方式,请求参数在URL后边拼接。send方法为空参
* post方式,请求参数在send方法中定义
2. 请求的URL:
3. 同步或异步请求:true(异步)或 false(同步)
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 :xmlhttp.responseText
//什么时候获取?当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>
总结
Ajax是一种Web技术,允许在不重新加载页面的情况下与服务器通信,实现动态内容更新,提高响应速度和用户体验。从而使得Web应用程序能够更加动态和交互性,提高了用户体验。