AJAX笔记（动力节点）（包含JSON）

不知-_

已于 2022-05-25 10:52:29 修改

阅读量450

点赞数

分类专栏：前端基础笔记文章标签： ajax json

于 2021-01-22 16:56:55 首次发布

本文链接：https://blog.csdn.net/http____/article/details/111465763

版权

前端基础笔记专栏收录该内容

14 篇文章 4 订阅

订阅专栏

视频地址：https://www.bilibili.com/video/BV15k4y167XM

一、ajax简介

即Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

Asynchronous: 异步的意思
JavaScript：javascript脚本，在浏览器中执行
and : 和
xml : 是一种数据格式

ajax是一种做局部刷新的新方法（2003左右），不是一种语言。
ajax包含的技术主要有javascript、dom、css、 xml等等。核心是javascript 和 xml 。

javascript：负责创建异步对象，发送请求，更新页面的dom对象。 ajax请求需要服务器端的数据。

xml：网络中的传输的数据格式。使用json替换了xml 。

<!-- xml数据格式 -->
  <数据>
  	<数据1>宝马1</数据1>
  	<数据2>宝马2</数据2>
 	<数据3>宝马3</数据3>
 	<数据4>宝马4</数据4>
 </数据>

二、全局刷新和局部刷新

全局刷新
整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。
局部刷新
在浏览器的内部，发起请求，获取数据，改变页面中的部分内容。
其余的页面无需加载和渲染。网络中数据传输量少，给用户的感受好。

ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部刷新。局部刷新使用的核心对象是异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用XMLHttpRequest对象。
在这里插入图片描述

三、异步对象XMLHttpRequest的属性和方法

创建异步对象，使用js的语法
```
var xxx = new XMLHttpRequest();
```
XMLHttpRequest方法
- open(method, url, async)：规定请求的类型。
  method：请求的类型：GET 还是 POST
  url：服务器（文件）位置
  async：true（异步）或 false（同步）
- send()：向服务器发送请求（用于 GET）
- send(string)：向服务器发送请求（用于 POST）
XMLHttpRequest属性
- readyState属性：表示异步对象请求的状态
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
  每当 readyState 发生变化时就会调用 onreadystatechange 函数。
- status属性：网络的状态，和Http的状态码对应
  200：“OK” 请求成功
  404：“Page not found” 服务器资源没有找到
  500：服务器内部代码有错误
- responseText属性：获取字符串形式的响应数据。
  例如 var data = xhr.responseText;
- responseXML属性：获取 XML 数据形式的响应数据

四、ajax中使用XMLHttpRequest对象

创建异步对象 var xmlHttp = new XMLHttpRequest();

给异步对象绑定事件。 onreadystatechange：当异步对象发起请求，获取了数据都会触发这个事件。
这个事件需要指定一个函数，在函数中处理状态的变化
例如：

 xmlHttp.onreadystatechange= function(){
    //  当 readyState 等于 4 且状态为 200 时，表示响应已就绪
		 if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
 	      //从服务器端获取了数据，更新当前页面的dom对象，完成请求的处理
			  var data = xmlHttp.responseText;
			  //更新dom对象
			  document.getElementById("name").value= data;
		 }
 }

初始请求的参数，执行open()方法.
xmlHttp.open(请求方式get|post, “服务器端的访问地址”, 同步|异步请求（默认是true，异步请求）)
例如：
```
  xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);
```
使用异步对象向服务器发送请求，执行send()
获取服务器端返回的数据，使用异步对象的属性 responseText .
使用例子：xmlHttp.responseText

回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。

访问地址：使用get方式传递参数
http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

五、json

什么是JSON

JavaScript Object Notation（JavaScript对象标记），简称JSON。是一种标准的数据交换格式。
JSON是一种标准的轻量级的数据交换格式，其特点是：体积小，易解析。
在实际的开发中有两种数据交换格式使用最多，一个是JSON，另一个是XML
XML体积较大，解析麻烦，但其优点是：语法严谨（通常银行相关的系统之间交换数据会使用XML）

JSON的语法格式

var jsonObj = {
	"属性名" : "属性值"，
	"属性名" : "属性值"，
	"属性名" : "属性值"，
	......
};

JSON的使用

//创建JSON对象（JSON对象也可以称为无类型对象）
var student = {
	"sno" : "100",
	"sname" : "张三",
	"sex" : "男"
};
//访问JSON对象的属性
alert(student.sno + "," + student.sname + "," + student.sex);

//之前没有使用JSON时，定义类、创建对象、访问对象属性
Student = function(sno, sname, sex){
	this.sno = sno;
	this.sname = name;
	this.sex = sex;
}
var stu = new Student("111", "李四", "男");
alert(stu.sno + "," + stu.sname + "," + stu.sex);

json数组

var places = [
{ name:"河北", jiancheng:"冀","shenghui":"石家庄"} , 
{ name:"山西", jiancheng:"晋","shenghui":"太原"} 
];
//遍历
for (var i=0; i<places.length; i++){
	var pObj = places[i];
	alert(pObj.name +","+ pObj.jiancheng +","+ pObj.shenghui);
}

eval() 函数解析JSON数据

eval函数的作用是：将字符串当作一段js代码来解释并执行。
java连接数据库，查询数据库之后，将数据在java程序中拼接成JSON格式的字符串，将json格式的字符串响应到浏览器。也就是说，Java响应到浏览器上的仅仅时一个“JSON格式的字符串”，还不是一个对象，可以使用eval函数将JSON格式的字符串转换为json对象。

var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}";  //这是Java程序发送过来的JSON格式的字符串
//将以上json格式的字符串转换成json对象
window.eval("var jsonObj = " + fromJava);
//访问json对象
alert(jsonObj.name +","+ jsonObj.password);  //在前端取数据