当前位置: 首页 > news >正文

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中构造信息

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()方法中定义要发送的数据

例如:

xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");

http://www.lryc.cn/news/354812.html

相关文章:

  • 框架学习之SpringMVC学习笔记(一)
  • 数据集005:螺丝螺母目标检测数据集(含数据集下载链接)
  • Swift 类和结构体
  • 网络安全相关面试题(hw)
  • 前端开发攻略---三种方法解决Vue3图片动态引入问题
  • 零售EDI:Target DVS EDI项目案例
  • AWS安全性身份和合规性之AWS Firewall Manager
  • R实验 随机变量及其分布
  • rapidssl泛域名https600元一年
  • 月薪5万是怎样谈的?
  • linux下宝塔负载100%解决方法
  • 【C++】STL快速入门基础
  • 面向对象编程的魅力与实战:以坦克飞机大战为例
  • 二叉树——堆的实现
  • 【Spring】DynamicDataSourceHolder 动态数据源切换
  • LeeCode 3165 线段树
  • 修改元组元素
  • 【模版方法设计模式】
  • rust语言初识
  • 知识图谱数据预处理笔记
  • Unity面试八股文之基础篇
  • HTTPS能否避免流量劫持?如何实现HTTPS
  • 簡述Vue 2.0 响应式数据的原理
  • Kafka线上集群部署方案怎么做?no.6
  • vscode 的 AI 协助插件 Tabnine / Codeium
  • Flutter 中的 OutlineButton 小部件:全面指南
  • Kubernetes可视化界面之DashBoard
  • Docker学习(4):部署web项目
  • 驱动开发中引入私有数据的原因
  • 删除edge浏览器文本框储存记录值以及关闭自动填充