AJAX相关概念及应用

Posted 2021-12-02 sherrystudy

1、Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML
XML 可扩展标记语言
Ajax是常用的WEB开发技术，是联系前端和后端的桥梁
应用：搜索引擎（例如在百度里输入一个字符，下面就自动显示相关信息的列表
其实这些信息就是通过使用Ajax从服务器获取的）

2、HTTP原理介绍
HTTP：超文本传输协议
访问网页的原理：响应 和 请求
请求：从客户端到服务器端的请求消息
响应：服务器根据客户请求返回内容
请求方式：get 和 post
get方式请求：需要从服务器获取数据
post方式请求：把客户端的数据提交给服务器

总结：Ajax就是通过运行javascript程序发起HTTP请求，而不用非得把请求地址写到
浏览器地址栏，再按回车请求网页

3、Chrome浏览器开发者工具
可以通过Network选项查看发起的请求

3、搭建自己的WEB服务器
如何让自己的电脑变成服务器：安装WEB服务器程序
最常用的WEB服务器程序是Apache，但是在Windows环境下安装会比较困难，所以
可以安装一个集成环境：XAMPP(下载地址：http://www.xampps.com)

本机的IP地址：127.0.0.1 等同于域名 localhost

将网页放到XAMPP安装根目录下htdocs文件夹下

4、Ajax使用步骤
（1）创建XMLHttpRequest对象

　　var xhr = new XMLHttpRequest();
（2）使用onreadystatechange事件监听请求过程的变换，并设置匿名函数处理响应内容

　　 readyState状态0-4

　　 0：请求初始化

　　1：服务器建立连接

　　2：收到的请求

　　3：处理请求

　　4：请求完成并准备响应就绪

（3）初始化请求

　　xhr.open()

（4）发送请求

　　xhr.send()

5、XMLHttpRequest对象
属性:

onreadeystate事件
readyState XMLHttpRequest对象的状态码，从0-4变化
0：请求初始化
1：服务器建立连接
2：收到的请求
3：处理请求
4：请求完成和响应准备就绪
status HTTP状态码，例如404/200/500
responseText 返回作为一个字符串的响应数据

方法：

open(method,url,asyn)
send()
setRequestHeader()仅在post请求时使用
xhr.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");

 

==============以下使用表单方式和Ajax方式请求区别==============
表单方式：地址栏会跳转
Ajax方式：地址不会跳转

6、表单GET请求与POST请求的区别
GET请求会将数据拼接显示在地址栏中，不安全。且地址栏地址的长度是有限制的，超出长度，地址失效
POST请求方式不会将数据显示在地址栏，相对get方式更安全

7、Ajax发起GET请求
document.querySelector(‘#getBtn‘).onclick = function(){
　　var name = document.getElementById(‘name‘).value;
　　var message = document.getElementById(‘message‘).value;
　　var xhr = new XMLHttpRequest();
　　　　xhr.onreadystatechange = function(){
　　　　　　if(xhr.status === 200 && xhr.readyState === 4){
　　　　　　　　alert(xhr.responseText);
　　　　　　}
　　　　}
　　xhr.open(‘GET‘,‘http://localhost/get-content.php?name=‘+ name +‘&message=‘+ message +‘‘,true);
　　xhr.send();
}
8、Ajax发起POST请求
document.querySelector(‘#postBtn‘).onclick = function(){
　　var name = document.getElementById(‘name‘).value;
　　var message = document.getElementById(‘message‘).value;
　　var xhr = new XMLHttpRequest();
　　xhr.onreadystatechange = function(){
　　　　if(xhr.status === 200 && xhr.readyState === 4){
　　　　　　alert(xhr.responseText);
　　　　}
　　}
　　xhr.open(‘POST‘,‘http://localhost/post-content.php‘,true);

　　xhr.setRequestHeader(‘Content-Type‘,‘Application/x-www-form-urlencoded‘);

　　xhr.send(‘name=‘+ name +‘&message=‘+ message);
}

9、Ajax处理JSON数据

JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式

后端可能是php、java、.net，不管后端是什么，只要知道后端会返回一个JSON数据即可。
实际中可以根据后端提供的接口来获取JSON，再在前端进行相关操作。

JSON.parse() 可以把JSON字符串转换为JavaScript对象

10、Ajax异步和同步

同步：后面的代码必须等到Ajax请求完成后才执行
异步：后面的代码会先于Ajax请求执行

一个程序中，异步操作会等到同步操作执行完成后才执行