Ajax
文章目录
一、同步与异步
- 同步(Synchoronous)： 一个任务在运行中时，不能进行其他的任务
- 异步(Asynchoronous)：在一个任务开启时，可以开启其他任务
| 同步应用场景 | 异步应用场景 |
|---|---|
| 网址访问 | 用户名验证 |
| a标签跳转 | 聊天室 |
| Submit表单提交 | 百度搜索词条建议 |
二、Json数据格式
2.1 JS对象数据格式
var stu = {
name:'Julay',
age:20,
sex:'nv'
}
2.2 Json数据格式
Json(JavaScript Object Notation)是以JS对象的数据格式表示出来的字符串
- Json 使用
{}表示一个对象 - Json 属性名需要使用
" "引起来 - 整体表示的是个字符串，最外层需要使用
' '
//Json字符串
var jsonStr = '{"name":"Tom","age":18}';
//Json数组
var JsonArr = '[
{"name":"julay","age":18},
{"name":"Tom","age":20}
]';
Json在Ajax中的应用:
服务器查询数据库返回的 result 为JS对象数组，响应传输给Ajax时被自动转换成Json字符串。
2.3 处理响应的Json数据
- Json字符串转换成JS对象数组：
var json_js = JSON.parse(); - JS数组转换成Json：
JSON.stringify(js_arr); - JS对象转换成Json：
var json_str = JSON.stringify(js_obj);
转换成JS对象数组后可以使用JavaScript的方法和属性处理该对象
- JSON_Ajax.js
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.绑定监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status == 200){
//result保存的是json字符串
var result = xhr.responseText;
//转换js对象数组
var jschange = JSON.parse();
alert(jschange);
}
}
//3.打开链接
var url = "/test/getajax?uname="+uname.value+"&upwd="+upwd.value;//拼接URL字符串
xhr.oprn("get",url,true);
//4.发送请求
xhr.send();
三、XML可扩展标记语言
XML(eXtensible Markup Language)的标签是没有被预定义过，需要用户自定义，其用途是传递数据。
3.1 XML语法
- XML文件的声明：
<?xml version="1.0" encoding="UTF-8"?> - 所有标签必须成对出现，无单标签
- 严格区分大小写
- 标签允许嵌套
- 每个标签允许自定义属性，属性值用
" "包括 - 每个XML文档有且只有一个根元素
- book.xml
<?xml version="1.0"? encoding="utf-8">
<books>
<booklist>
<name>《时间简史》</name>
<author>霍金</author>
</booklist>
<booklist>
<name>《三国演义》</name>
<author>罗贯中</author>
</booklist>
<booklist>
<name>《红楼梦》</name>
<author>曹雪芹</author>
</booklist>
</books>
- XML_Ajax.js
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4&&xhr.state == 200){
//books相当于XML里根目录的books标签,以下同理
var books = xhr.responseXML;
//得到booklist标签的内容数组
var booklist = result.getElementsByTagName("booklist");
var name = books[1].getElementsByTagName("name")[0];
alert(name.innerHTML);
}
}
xhr.open("get","books.xml",true);
xhr.send();
关键点：
- 获取标签数组 ：getElementsBayTagName( ) 返回的是类数组，不可用JavaScript自带数组API
- 读取标签内容：TagName.innerHTML
四、Ajax
Ajax(Asynchoronous Javascript And Xml)是使用JavaScript提供的异步对象，来异步向服务器发送请求，并接受响应回来的数据。它可以无刷新的效果更改页面的布局内容。
2.1异步请求步骤
- 创建异步对象
- 绑定监听事件（接受请求）
- 打开链接（创建请求）
- 发送请求
2.2 异步对象属性和方法
-
readyState属性
状态值 状态的作用 0 请求未初始化 1 服务器已连接正在发送请求 2 接收响应头 3 接收响应主体 4 响应数据接收成功 -
statu 服务器响应状态码属性
-
onreadystatechange 监听状态事件，当readyState改变自动激活
-
open( [method] , [url] , [isAsyn] ) 创建请求函数
-
send( [body] ) 发送请求函数
-
abort( ) 取消请求函数
-
getAllResponseHeader( ) 获取所有响应头信息
-
getResponseHeader( ) 获取执行响应头信息
-
setRequestHeader( ) 设置请求的HTTP头文件
- GET请求方法的Ajax
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.绑定监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status == 200){
//执行相关操作的代码
var result = xhr.responseText;
alert(result);
}
}
//3.打开链接
var url = "/test/getajax?uname="+uname.value+"&upwd="+upwd.value;//拼接URL字符串
xhr.oprn("get",url,true);
//4.发送请求
xhr.send();
- POST请求方法的Ajax
- postuser.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PostUser</title>
</head>
<body>
<input type="text" id="uname" name="uname">
<input type="submit" value="查询" onclick="query()">
<div id = "show"></div>
<script>
var show = document.getElementById("show");
function query(){
//创异步对象
var xhr = new XMLHttpRequest();
//绑定监听事件
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
show.innerHTML = xhr.responseText;
}
}
var url = "/app/query";
//打开链接，以post方式
xhr.open("post",url,true);
//设置请求头文件参数
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//拼接请求主体
var formdata = "uname="+uname.value;
//发送带有请求主体的请求
xhr.send(formdata);
}
</script>
</body>
</html>
- server.js
const express = require('express');
//导入路由文件
const querytxt = require('./routes/query.js');
//创建服务器
var server = express();
//设置端口号
server.listen(3000);
//挂载静态资源目录
server.use(express.static('./public'));
//挂载/query 路由
server.use('/app',querytxt);// '/query'
- query.js
const express = require('express');
//导入mysql模块
const mysql = require('mysql');
//导入请求主体处理模块
const bodyParser = require('body-parser');
//创建空路由
var router = express.Router();
//设置使用json解析
router.use(bodyParser.json());
// 创建 application/x-www-form-urlencoded 编码解析
router.use(bodyParser.urlencoded({extended:false}));
//创建数据库连接池
var pool = mysql.createPool({
host:'127.0.0.1',
port:'3306',
user:'root',
password:'741852',
database:'tedu',
connectionLimit:10
});
//post方法查询数据库名称路由
router.post('/query',(req,res)=>{
var $uname = req.body.uname;
var sql = "select uname from login where uname=?";
pool.query(sql,[$uname],(err,result)=>{
if(err) throw err;
if(result.length > 0){
res.send("用户存在");
}else{
res.send("用户不存在");
}
});
});
//导出路由
module.exports = router;
优化的Ajax的代码查看 JavaScript DOM技术专栏 第7篇文章
