ajax前后端请求的交互

最新推荐文章于 2024-04-14 10:20:02 发布

星辰与晨曦

最新推荐文章于 2024-04-14 10:20:02 发布

阅读量509

点赞数 2

分类专栏： javaweb 文章标签： ajax javascript idea tomcat

本文链接：https://blog.csdn.net/weixin_45970271/article/details/120767082

版权

客户端与浏览器的交互方式

客户端与浏览器的交互方式1：同步交互方式

例如：超链接，表单请求服务器端程序，向客户端做出响应，响应的内容会覆盖原来的页面内容。会打断客户端的正常操作，不友好

客户端与浏览器的交互方式：异步交互方式（ajax）
就是当客户端与服务器交互时，服务器向客户度响应内容，不影响客户端的正常操作。

实现方式：就要借助浏览器、JavaScript 。

整个过程页面不刷新，只需要更新网页的局部内容，不打断客户端的正常操作。

什么是Ajax

Ajax 全称为：“Asynchronous JavaScript and XML” 就是（异步 JavaScript 和 XML）

使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

Ajax的其本质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，然后服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

创建XMLHttpRequest对象

◆ XMLHttpRequest对象就是发送请求到服务器并获得返回结果

◆ 现代所有浏览器都有内建了 XMLHttpRequest 对象，通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

new XMLHttpRequest()

XMLHttpRequest()中常用的方法

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的功能。

◆ open(method,URL,async)
建立与服务器的连接；
method参数指定请求的HTTP方法，典型的值是get 或post；
URL参数指定请求的地址
async参数指定是否使用异步请求，其值为true或 false

◆ send(content)
发送请求;
content参数是指定请求的参数

◆ setRequestHeader(header,value)
设置请求的头信息

XMLHttpRequest()中常用的属性

◆ onreadystatechange： 事件（就是某种条件满足的时候，事件就会触发），指定回调函数
◆ readystate: XMLHttpRequest的状态信息（这是一个对象内部的状态码）

状态就绪码	说明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

因为状态码的执行，在直接执行onreadystatechange会陪调用3次（2、3、4），所以我们就要在前端设置对应的状态码为4（读取完毕响应一个4）。

◆ status： HTTP的状态码。（这是一个服务器响应回来的状态码）

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

◆ **responseText：**获得响应的文本内容

因为以服务器之间的响应就是以字符串的形式进行响应，所以前端拿到的都是字符串
就要通过一个属性来将字符串转换为需要的代码属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个web程序</title>
    <script type="text/javascript">
        function subform() {
     
            //subform获得account和password打印进去的数据
            var account = document.getElementById("accountId"

最低0.47元/天解锁文章

星辰与晨曦

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax前后端请求的交互

客户端与浏览器的交互方式什么是Ajax创建XMLHttpRequest对象XMLHttpRequest()中常用的方法XMLHttpRequest()中常用的属性get和post方式请求的区别客户端与浏览器的交互方式客户端与浏览器的交互方式1：同步交互方式例如：超链接，表单请求服务器端程序，向客户端做出响应，响应的内容会覆盖原来的页面内容。会打断客户端的正常操作，不友好客户端与浏览器的交互方式：异步交互方式（ajax）就是当客户端与服务器交互时，服务器向客户度响应内容，不影响客户端的正常操作。.
复制链接

扫一扫