ajax

最新推荐文章于 2023-05-08 19:56:40 发布

passerby_Ai

最新推荐文章于 2023-05-08 19:56:40 发布

阅读量228

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_45736498/article/details/107037565

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax

- - 一. ajax

一. ajax

1.1 向服务器发送请求

1.地址栏

2.from表单

3.超链接

4.window.location.href=“url”; 触发请求

这些方送发送请求的方式会中断当前浏览器页面运行的内容。未了解决这些缺点，我们就有了Ajax。

1.2 什么是Ajax

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

1.3 异步与同步

在上面我们又提到异步，那么什么是异步，我们首先得了解同步请求。

1.3.1同步请求

核心思想

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ENOHWGO-1593486012004)(imgs\01.png)]

同步请求特点
- 发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
- 使用者通过单个线程调用服务；该线程发送请求，服务运行会受到阻塞，等待服务器做出响应。
- 如果使用者在服务运行的过程中阻塞时崩溃了，当它重新启动时，将无法重新连接到正在进行的调用，所以响应丢失了。使用者必须重复调用过程，并且期望这次不会崩溃。

1.3.2异步请求

核心思想

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jNxL9zKH-1593486012006)(imgs/02.png)]
异步请求特点
- 发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
- 使用者通过两个线程调用服务；一个线程发送请求，而另一个单独的线程接收响应。
- 如果使用者在发送了请求之后等待响应时崩溃了，当它重新启动时，可以继续等待响应，所以响应不会丢失。

1.3.3同步通信方式与异步通信的概念

加深理解

同步通信方式要求通信双方以相同的时钟频率进行，而且准确协调，通过共享一个单个时钟或定时脉冲源保证发送方和接收方的准确同步，效率较高；
异步通信方式不要求双方同步，收发方可采用各自的时钟源，双方遵循异步的通信协议，以字符为数据传输单位，发送方传送字符的时间间隔不确定，发送效率比同步传送效率低。

1.4实现异步请求的发送

1.4.1异步请求 · 请求

技术：ajax 也就是javascript

核心对象
- XMLHttpRequest() :用于谷歌等浏览器
- ActiveXobject : 用于IE浏览器

发方法介绍

1. `XMLHttpRequest` 对象
	作用：发送请求，接受响应。
2. `xhr.open（open(method,url,async)）` 方法
	作用：建立xhr与服务器的连接规定请求的类型、URL 以及是否异步处理请求。
    参数：
    	method：请求的类型；GET 或 POST
		url：文件在服务器上的位置
		async：true（异步）或 false（同步）
3.`xhr.send(string);`
	作用：将请求发送到服务器
    参数：
    	string：仅用于 POST 请求

使用

html

<a href="#" id="button">提交</a>

ajax

    <script type="text/javascript">
        window.onload = function () {
            //获取对象绑定事件
            let button = document.getElementById("button");
            button.onclick = function () {
                //1.创建xhr对象
                let xhr = new XMLHttpRequest();
                //2.建立于服务器的连接
                xhr.open("GET","${pageContext.request.contextPath}/addZ/add",true); //true可以省略 默认为异步
                //3.发送请求
                xhr.send();
            }

        }

测试点击

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3y9GAk8-1593486012007)(imgs/03.png)]

点击超链接可以看到请求已经发送

服务端代码这个我们只要知道接受到请求就可以了

package com.guoke.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/addZ")
public class AddZ {

    @RequestMapping("/add")
    public void add(String id) throws InterruptedException {
        //1.接受提交的id
        //2.调用service处理业务
        //3.响应给客户端
        System.out.println("已接受到请求！！");
        Thread.sleep(3000);

    }
}

点击提交后结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2lEhG7M-1593486012010)(imgs/04.png)]

可以看到服务器已接受到请求。

1.4.2异步请求·响应

xhr的工作状态

工作状态：xhr.readyState
- xhr.readyState=0 : xhr 初始化
- xhr.readyState=1：建立xhr和服务器的连接
- xhr.readyState=2 ：发送xhr请求
- xhr.readyState=3：服务器处理xhr的请求
- xhr.readyState=4：服务器响应回到浏览器
小贴士：当xhr.readyState=4 服务器接受到响应结果。

事件函数：xhr.onreadystatechange

每次xhr的工作状态发生变化，函数就会调用一次。

xhr.onreadystatechange = function () {

       //如果xhr.readyState == 4，获得服务器的响应。
       if ( xhr.readyState == 4 ){
			//服务器响应回到浏览器上
       }
   };

接受响应结果 xhr.responseText

服务器端，将响应字符串，赋值给xhr的responseText属性；

xhr.onreadystatechange = function () {

   //如果xhr.readyState == 4，获得服务器的响应。
   if ( xhr.readyState == 4 ){
    	xhr.responseText;//服务器端，将响应字符串，赋值给xhr的responseText属性；
   }
};

xhr 和服务器的交互状态码。

服务器响应给浏览器的状态码
- 404 资源未找到
- 500 代码运行异常
- 30X 服务器返回了Sendredirect, 浏览器自动重定向
- 200 服务器运行一切正常
小贴士:当服务器状态码为200时，可以用来判断返回结果。

状态码属性 xhr.status

xhr.onreadystatechange = function () {

   //如果xhr.readyState == 4，获得服务器的响应。
   if ( xhr.readyState == 4 && xhr.status == 200){
       //xhr的工作完成 且响应成功回到浏览器
    		xhr.responseText;
   }
};

测试服务器端代码

服务器：java

package com.guoke.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/addZ")
public class AddZ {

    @RequestMapping("/add")
    public void add(String id , HttpServletResponse response) throws  IOException {
        //1.接受提交的id
        //2.调用service处理业务
        //3.响应给客户端
        System.out.println("已接受到请求！！");
        response.getWriter().write("ok");
        response.flushBuffer();
    }
}

javaScript

 window.onload = function () {
            //获取对象绑定事件
            let button = document.getElementById("button");
            button.onclick = function () {
                //1.创建xhr对象
                let xhr = new XMLHttpRequest();
                //2.建立于服务器的连接
                xhr.open("GET","${pageContext.request.contextPath}/addZ/add",true); //true可以省略 默认为异步
                //3.发送请求
                xhr.send();
               xhr.onreadystatechange = function () {
                   //如果xhr.readyState == 4，获得服务器的响应。
                   if ( xhr.readyState == 4 && xhr.status == 200){
                     console.log(xhr.responseText);
                     //下一步就该处理网页中的元素
                   }
               };

            }

        }

1.5 ajax发送Post请求

get情求与post请求的区别：
- get请求特点：数据追加在地址栏上、
- post请求特点：数据封装在请求体上
  
  http角度：
  
  请求设置： content-type = application/x-www/form-urlencooed

ajax发送post请求：

1.创建xhr对象
let xhr = new XMLHttpRequest();
2.建立于服务器的连接
xhr.open("POST","user/login",true); //true可以省略 默认为异步
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
3.发送请求
xhr.send("username=111&password=222"); //请求参数名=值 & 请求参数 = 值

passerby_Ai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

Ajax一. ajax1.1 向服务器发送请求1.地址栏2.from表单3.超链接4.window.location.href=“url”; 触发请求这些方送发送请求的方式会中断当前浏览器页面运行的内容。未了解决这些缺点，我们就有了Ajax。1.2 什么是AjaxAJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部
复制链接

扫一扫