AJAX(JavaScript版本)

目录

一.AJAX简介

二.XMLHttpRequests对象

2.1XMLHttpRequests对象简介

2.2创建XMLHttpRequests对象

2.3定义回调函数

2.4发送请求

2.5XMLHttpRequests对象方法介绍

2.6XMLHttpRequests对象属性

三.向服务器发送请求

3.1发送请求

3.2使用GET还是POST

3.3使用GET来发送信息

3.4POST请求

一.AJAX简介

服务器向浏览器传输数据时,浏览器需要跳转到一个新的"URL "或者"重新渲染网页 ",才可以接收来自服务器的数据,这对于现代用户来说是不友好的,因为观感极差

那么有没有一种办法可以使浏览器接收服务器的数据 ,并且不更新网页 只是动态的更新网页部分数据呢?

随着这个问题"AJAX"应运而生,使用"AJAX"可以做到以下事情:

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

二.XMLHttpRequests对象

2.1XMLHttpRequests对象简介

XMLHttpRequests对象是AJAX的基石

使用 XMLHttpRequests对象****允许前端向后端发送一个数据请求用来获得数据

这个数据请求的过程可以分为下面"四大步":

  • 创建XMLHttpRequests对象
  • 定义回调函数
  • 打开XMHttpRequests对象
  • 向服务器发送请求

2.2创建XMLHttpRequests对象

创建XMLHttpRequests对象的语法:

var myXMLR = new XMLHttpRequests();

2.3定义回调函数

回调函数是作为参数传递给另一个函数的函数

定义回调函数我们可以使用XMLHttpRequests对象提供的"onload()"函数,该函数用来指定当请求响应后应该执行的函数

xhttp.onload = function(){

//当相应准备就绪时要做什么

}

2.4发送请求

向服务器发送请求,我们可以使用"open() "方法来打开XMLHttpRequests 对象,再使用"send()"方法来发送请求

xhttp.open("open","ajax_info.txt");

xhttp.send();

2.5XMLHttpRequests对象方法介绍

|-------------------------------------|--------------------------------------------------------------------------------------------------------------------|
| 方法 | 描述 |
| new XMLHttpRequests() | 创建新的XMLHttpRequests对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getReponseHeader() | 返回特定的头部信息 |
| open(method,url,async,user,psw) | 规定请求 * method:请求类型GET或POST * url:文件位置 * async:true(异步)或false(同步) * user:可选的用户名 * psw:可选的密码 |
| send() | 向服务器发送请求,用于GET请求 |
| send(string) | 向服务器发送请求,用于POST请求 |
| setRequestHeader() | 将标签/值对添加到要发送的标头 |

2.6XMLHttpRequests对象属性

属性 描述
onload 定义接收到(加载)请求时要调用的函数
onreadystatechange 定义当readyState属性发生变化时调用的函数
readyState 保存XMLHttpRequests的状态 * 0:请求未初始化 * 1:服务器连接已建立 * 2:请求已收到 * 3:正在处理请求 * 4:请求已完成响应且已就绪
responseText 以字符串形式返回响应数据
responseXML 以XML数据返回响应数据
status 返回请求的状态号 * 200:"ok" * 403:"Forbidden" * 404:"Not Found"
statusText 返回状态文本,比如("OK"、"Not Found"等)

ps :"当readyState为4且status为200时,响应就绪"

三.向服务器发送请求

3.1发送请求

在上面我们已经提到过,可以使用"open() "和"send()"方法搭配向服务器发送请求

|-------------------------------------|--------------------------------------------------------------------------------------------------------------------|
| open(method,url,async,user,psw) | 规定请求 * method:请求类型GET或POST * url:文件位置 * async:true(异步)或false(同步) * user:可选的用户名 * psw:可选的密码 |
| send() | 向服务器发送请求,用于GET请求 |
| send(string) | 向服务器发送请求,用于POST请求 |

3.2使用GET还是POST

在大多数情况下,GETPOST更简单更快

但在以下情况请考虑使用POST

  • 缓存文件不是选项(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST无大小限制)
  • 发送用户输入(可包含未知字符),POST比GET更强大更安全

3.3使用GET来发送信息

如果想要使用GET 来发送信息,可以在URL中构造信息

javascript 复制代码
xhttp.open("GET","demo.asp?fname=Bill&&name=Gates",true);
xhttp.send();

3.4POST请求

一条简单的POST请求:

xhttp.open("POST","demo_post.asp",true);

xhttp.send();

如果需要像HTML 表单那样POST数 据,请通过setRequestHeader() 添加一个HTTP头部 ,并在send() 方法中定义要发送的数据

例如:

javascript 复制代码
xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");
相关推荐
三巧1 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.2 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI18 分钟前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码30 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪32 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&32 分钟前
css word
前端·css
Мартин.35 分钟前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜35 分钟前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey1 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus