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");
相关推荐
bysking26 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓42 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4111 小时前
无网络安装ionic和运行
前端·npm
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js