Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML(其实主要用的就是javascript技术),它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 Ajax的特点是异步 ,比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。
一.Ajax
1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML
AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)
它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript改变页面,这样页面内容就会更新了。(微博页面加载过程的例子,加载一会 下方才会出现内容,这其实就是Ajax加载的过程。)
简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
1. 异步和同步:客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
- Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 - 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
- 提升用户的体验
2.Ajax的关键元素:
- JavaScript语言:Ajax技术的主要开发语言;
- XML / SON / HTML等:用来封装请求或响应的数据格式;
- DOM文档对象模型:通过 DOM 属性或方法修改页面元素,实现页面局部刷新;
- CSS:改变样式,美化页面效果,提升用户体验度;
- Ajax 引擎 :即 XMLHttpRequest 对象,以异步方式在客户端与服务器端之间传递数据
3.实现方式:
原生方式与jQuery方式:
1. 创建ajax对象
let xhr = new XMLHttpRequest();
2. 告诉ajax请求方式和请求地址
xhr.open(请求方式,请求地址);
3. 发送请求
xhr.send();
4. 获取服务器返回的数据
xhr.onload=function(){
xhr.responseText;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js的原生ajax</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"> <span id="userwarn"></span>
<script>
document.getElementById('username').onblur=function () {
console.log(this.value);
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉ajax请求方式和请求地址
xhr.open('get','http://localhost:8080/check?username='+this.value)
// 3.发送请求
xhr.send();
// 4.获取服务器返回数据
xhr.onload=function () {
console.log(xhr.responseText);// 返回的字符串
document.getElementById('userwarn').innerText=xhr.responseText;
}
}
</script>
</body>
</html>
JQuery的Ajax插件
* 语法:
$.ajax({name:value,name:value})
* 参数:
url:请求地址
type:请求方式 (get:大小有限制、post:大小没有限制)
data:请求参数
success:请求成功时,执行的回调函数
-------
error:请求失败时,执行的回调函数
dataType:预期服务器返回的数据类型:text、json
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq的ajax函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用ajax函数发送请求
$.ajax({
url:"http://localhost:8080/check",
type:"post",
data:"username="+$(thi