本文详细介绍了AJAX的工作原理、参数传递、JSONP请求及处理同源策略的方法，包括CORS。讲解了$.ajax方法的使用，包括get和post请求参数的处理，以及JSONP的回调函数封装。还通过实例展示了AJAX在验证邮箱、搜索提示、省市区联动等场景的应用，并探讨了表单数据的序列化和二进制文件上传。最后，提到了RESTful API和XML数据处理。
AJAX的优势
AJAX的运行原理和步骤
一般情况下不会返回一个文本，而是JSON对象作为响应，但是服务器端一般是字符串所以要转换为对象
转换加字符拼接
传递get请求参数，参数要自己拼接
post 请求如何传递请求参数
引入body-parser和app.use 模块
还可以用JSON格式来传递(请求参数格式
get不能传JSON 然后传统网站表单也不可以用
06-获取服务器端响应数据的另一种方式
AJAX状态码
// 当ajax状态码发生变化的时候出发
xhr.onreadystatechange = function()
有点过时，但需要了解
07.Ajax错误处理
利用xhr.status（）来返回HTTP状态码
AJAX在低版本的IE中存在缓存的问题，后一次改变了数据依然会加载读取前一次数据的缓存，所以通过改变每次地址，使每次地址都不同来解决这个问题
AJAX是异步代码
false代表同步。应该去掉代表异步
AJAX的封装
基本配置
将函数抛出去，通过用户每次调用来实现
通过success方法来实现
拼接字符串
多了个＆
利用循环来拼接字符，get和post输出的地址不同，进行区分
调用get方法地址正确
在post请求中分辨是不是json的格式传递
做判断和试图用JSON
先设置POST路由
添加header来确认
查看内容类型
是字符串类型
对状态码的成功和失败情况进行分别处理
得到结果
完成状态码的修改
对于json类型的数据要转换为对象类型，完成这一封装，比较好调用
以上完成对于JSON的封装
设定一个默认值
如果参数没有调用就使用默认值，如果调用就覆盖默认值
结果没变 同样没有调用的参数数据采用默认值
到此AJAX的封装结束！
使用模板引擎提供的模板语法将数据与HTML进行拼接
以上完成
案例：验证邮箱地址是否输入正确
对于info的id进行设置 如果正确为bg-sucess
错误为bg-danger
先判断输入的邮箱是否符合规则
若符合规则，则调用AJAX将参数带入
然后传递到服务器端APP.JS
APP.JS进行判断，并传回信息到SUCCESS和 ERROR中去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证邮箱地址是否已经注册</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
p:not(:empty) {
padding: 15px;
}
.container {
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label>邮箱地址</label>
<input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
</div>
<!-- 错误 bg-danger 正确 bg-success -->
<p id="info"></p>
</div>
<script src="/js/ajax.js"></script>
<script>
// 获取页面中的元素
var emailInp = document.getElementById('email');
var info = document.getElementById('info');
// 当文本框离开焦点以后
emailInp.onblur = function () {
// 获取用户输入的邮箱地址
var email = this.value;
// 验证邮箱地址的正则表达式
var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
// 如果用户输入的邮箱地址不符合规则
if (!reg.test(email)) {
// 给出用户提示
info.innerHTML = '请输入符合规则的邮箱地址';
// 让提示信息显示为错误提示信息的样式
info.className = 'bg-danger';
// 阻止程序向下执行
return;
}
// 向服务器端发送请求
ajax({
type: 'get',
url: 'http://localhost:3000/verifyEmailAdress',
data: {
email: email
},
success: function (result) {
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error: function (result) {
console.log(result)
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
案例：搜索框输入自动提示
通过AJAX向服务器传递数据
通过template来拼接数据和html
利用循环将获取的数据呈列表显示
result中key就是输入的内容，如果包含key的将result返回拼接在列表中
用户每次输入都会向服务器传递一次，我们用延时器来取消掉这种操作，设置在八秒传送一次，用户每次输入都将延时器取消掉，这样只有在输入完成之后没有输入后的八秒才会向服务器发送请求
同时利用trim来检测用户是否输入了内容，若没有输入内容，将下拉提示框隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
.list-group {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
<ul class="list-group" id="list-box">
</ul>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
{
{
each result}}
<li class="list-group-item">{
{
$value}}</li>
{
{
/each}}
</script>
<script>
// 获取搜索框
var searchInp = document.getElementById('search');
// 获取提示文字的存放容器
var listBox = document.getElementById('list-box');
// 存储定时器的变量
var timer = null;
// 当用户在文本框中输入的时候触发
searchInp.oninput = function () {
// 清除上一次开启的定时器
clearTimeout(timer);
// 获取用户输入的内容
var key = this.value;
// 如果用户没有在搜索框中输入内容
if (key.trim().length == 0) {
// 将提示下拉框隐藏掉
listBox.style.display = 'none';
// 阻止程序向下执行
return;
}
// 开启定时器 让请求延迟发送
timer = setTimeout(function () {
// 向服务器端发送请求
// 向服务器端索取和用户输入关键字相关的内容
ajax({
type: 'get',
url: 'http://localhost:3000/searchAutoPrompt',
data: {
key: key
},
最低0.47元/天 解锁文章
8988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
