Ajax

文章目录

Ajax

一、同步与异步
二、Json数据格式

2.1 JS对象数据格式
2.2 Json数据格式
2.3 处理响应的Json数据

三、XML可扩展标记语言

3.1 XML语法

四、Ajax

2.1异步请求步骤
2.2 异步对象属性和方法

一、同步与异步

同步(Synchoronous)：一个任务在运行中时，不能进行其他的任务
异步(Asynchoronous)：在一个任务开启时，可以开启其他任务

@H_404_53@ 同步应用场景异步应用场景网址访问用户名验证 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属性
@H_404_53@ 状态值状态的作用 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篇文章

青丝慕雪丶发布了113 篇原创文章 · 获赞 175 · 访问量 1万+ 私信关注

01 Ajax知识点