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");
相关推荐
Cshaosun3 分钟前
js版本之ES5特性简述【String、Function、JSON、其他】(二)
前端·javascript·es
__WanG6 分钟前
Flutter将应用打包发布到App Store
前端·flutter·ios
leluckys9 分钟前
flutter 专题十七 Flutter Flar动画实战
前端·flutter
豆包MarsCode25 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
开发语言·前端·javascript·css·ide·html
22x艾克斯34 分钟前
Web Notifications API-让网页也能像QQ一样实现消息通知
前端
X 西安36 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
想你的风吹到了瑞士42 分钟前
变量提升&函数提升
前端·javascript·vue.js
生椰拿铁You1 小时前
12 —— Webpack中向前端注入环境变量
前端
Huazzi.1 小时前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉1 小时前
前端和后端
前端·学习笔记