AJAX学习笔记1发送Get请求

这篇具有很好参考价值的文章主要介绍了AJAX学习笔记1发送Get请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

传统请求有哪些方式,及缺点

传统请求有哪些?

1.直接在浏览器地址栏上输入URL.

2.点击超连接.

<a href="/上下文/请求地址">超链接请求</a>  ---->相对路径

<a href="http://www.baidu.com">超链接请求</a>  ---->绝对路径

3.提交form表单

<form action="/上下文/请求地址" method="post">

4.使用JS代码

window.open("url")

document.localtion.href=""

window.localtion.href=""

新建项目举例

AJAX学习笔记1发送Get请求,ajax,学习,笔记

next----next

AJAX学习笔记1发送Get请求,ajax,学习,笔记

设置字符集

AJAX学习笔记1发送Get请求,ajax,学习,笔记

添加框架支持

AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记

关于为什么项目启动会自动访问index的说明

Servlet中WebApp欢迎页面配置_biubiubiu0706的博客-CSDN博客

 引入依赖

AJAX学习笔记1发送Get请求,ajax,学习,笔记

index.html

AJAX学习笔记1发送Get请求,ajax,学习,笔记

 AJAX学习笔记1发送Get请求,ajax,学习,笔记

配置Tomcat

AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记

传统请求的缺点,每次请求都会将整个页面刷新

AJAX可以做到局部刷新

AJAX通过浏览器上一个对象XMLHttpRequest  可以理解为一个线程,

通过XMLHttpRequest(浏览器内置对象)向服务器发送请求做到局部更新

AJAX可以在浏览器当中发送异步请求.请求A和请求B是异步的.谁也不需要等谁.类似多线程并发

响应回来的数据:普通文本,XML字符串,JSON数据

学习AJAX需要看得懂下面JS代码

AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX学习笔记1发送Get请求,ajax,学习,笔记

发送第一个AJAX请求

AJAX   GET请求

AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记

添加依赖

AJAX学习笔记1发送Get请求,ajax,学习,笔记

配置Tomcat

AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

因为后端没有写该接口

AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX学习笔记1发送Get请求,ajax,学习,笔记

最核心部分就是框中的回调函数中的

AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX学习笔记1发送Get请求,ajax,学习,笔记

再次测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

编写后端代码

AJAX学习笔记1发送Get请求,ajax,学习,笔记

测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

后端出错

AJAX学习笔记1发送Get请求,ajax,学习,笔记测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

后端向浏览器响应文本数据

AJAX学习笔记1发送Get请求,ajax,学习,笔记

其实该用responseText

AJAX学习笔记1发送Get请求,ajax,学习,笔记

测试   完美

AJAX学习笔记1发送Get请求,ajax,学习,笔记

其实该用responseText

AJAX学习笔记1发送Get请求,ajax,学习,笔记

测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

给点颜色看看

AJAX学习笔记1发送Get请求,ajax,学习,笔记

其实该用responseTextAJAX学习笔记1发送Get请求,ajax,学习,笔记

测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

再做个练习  熟练发送AJAX   GET请求

AJAX学习笔记1发送Get请求,ajax,学习,笔记

 AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX学习笔记1发送Get请求,ajax,学习,笔记

下面来改进一下AJAX请求的写法    下面这样也可以  不知道为什么

理论来说this已经没效果了.但是测试也可以

AJAX学习笔记1发送Get请求,ajax,学习,笔记

正确的写法应该是如下   ajax3这种方式只是为了扩展下思路

AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX GET请求   提交数据给服务器    以ajax2为例

AJAX学习笔记1发送Get请求,ajax,学习,笔记

get请求提交数据是在请求行上

格式比如:url?name=xxx&password=xxx  是HTTP协议中规定的

AJAX学习笔记1发送Get请求,ajax,学习,笔记AJAX学习笔记1发送Get请求,ajax,学习,笔记

测试

AJAX学习笔记1发送Get请求,ajax,学习,笔记

注意请求地址并没有变化,参数也没有再url上

AJAX学习笔记1发送Get请求,ajax,学习,笔记

看下后端有没有接收到

AJAX学习笔记1发送Get请求,ajax,学习,笔记

但是现在 参数在程序里是写死的   改一下代码

AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX学习笔记1发送Get请求,ajax,学习,笔记

测试  输出到前端页面没有乱码

  AJAX学习笔记1发送Get请求,ajax,学习,笔记

控制台乱码,应该是AJAX学习笔记1发送Get请求,ajax,学习,笔记

改成了GBK试试  和自己计算机字符集原因

AJAX学习笔记1发送Get请求,ajax,学习,笔记

AJAX学习笔记1发送Get请求,ajax,学习,笔记

  • 对于低版本的IE浏览器来说,AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说,大部分浏览器都已经不存在AJAX get缓存问题了。

  • 什么是AJAX GET请求缓存问题呢?

    • 在HTTP协议中是这样规定get请求的:get请求会被缓存起来。

    • 发送AJAX GET请求时,在同一个浏览器上,前后发送的AJAX请求路径一样的话,对于低版本的IE来说,第二次的AJAX GET请求会走缓存,不走服务器。

  • POST请求在HTTP协议中规定的是:POST请求不会被浏览器缓存。

  • GET请求缓存的优缺点:

    • 优点:直接从浏览器缓存中获取资源,不需要从服务器上重新加载资源,速度较快,用户体验好。

    • 缺点:无法实时获取最新的服务器资源。

  • 浏览器什么时候会走缓存?

    • 第一:是一个GET请求

    • 第二:请求路径已经被浏览器缓存过了。第二次发送请求的时候,这个路径没有变化,会走浏览器缓存。

  • 如果是低版本的IE浏览器,怎么解决AJAX GET请求的缓存问题呢?

    • 可以在请求路径url后面添加一个时间戳,这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的,这样就不会走浏览器的缓存问题了。

    • 可以采用时间戳:"url?t=" + new Date().getTime()

    • 或者可以通过随机数:"url?t=" + Math.random()

    • 也可以随机数+时间戳....

如果真遇到了  解决方式

AJAX学习笔记1发送Get请求,ajax,学习,笔记

或者随机数加时间戳     随机数:Math.random()文章来源地址https://www.toymoban.com/news/detail-693198.html

到了这里,关于AJAX学习笔记1发送Get请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【AJAX】使用JQ发送AJAX发送请求

    运行结果  获取的响应是字符串,如何把字符串变成JSON对象 方法一:JSON.parse(data) 方法二:设置响应数据类型为json格式 // $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]),,\\\'json)     $.get(\\\'http://127.0.0.1:8000/server\\\', { a: 100, b: 200 }, function (data) {

    2024年02月13日
    浏览(35)
  • 原生js发送ajax请求---ajax请求篇(一)

    在原生js中我们使用的是XMLHttpRequest对象来发送ajax请求 主要步骤就是:    1.创建XMLHTTPRequest对象 2.使用open方法设置和服务器的交互信息 3.设置发送的数据,开始和服务器端交互 4.注册事件 5.更新界面 (1) get方式  (2)post方式  二、也可以对原生js发送ajax请求进行封装 以

    2024年02月12日
    浏览(29)
  • ajax构造get、post、put请求

    前端代码: 后端代码:

    2024年02月12日
    浏览(34)
  • 【AJAX】axios发送请求

    引入axios 以下是axios的GET请求格式: 以下是axios的POST请求格式: 注意:params中的键值对数据是拼接在url上,无论是post还是get请求。 axios

    2024年02月13日
    浏览(45)
  • 原生 Ajax 发送请求

    1. 创建

    2024年02月09日
    浏览(50)
  • javascript二维数组(21)执行异步HTTP(Ajax)请求的方法($.get、$.post、$getJSON、$ajax)

    . g e t 、 .get、 . g e t 、 .post、 g e t J S O N 、 getJSON、 g e t J SON 、 ajax都是jQuery提供的用于执行异步HTTP(Ajax)请求的方法。每个方法都有其特定的用途和区别。 . g e t :这个方法使用 G E T 方式来进行异步请求。其语法结构为: .get:这个方法使用GET方式来进行异步请求。其语

    2024年02月07日
    浏览(40)
  • django中使用ajax发送请求

    浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求,特点是:页面刷新 除此之外,也可以基于ajax向后台发送请求(异步) 依赖jQuery 编写ajax代码 1、在django 中使用ajax发送post请求,通过下面方法免除csrf_token 2、想要去数据库中获取数据时:可以是对象也可以

    2024年02月13日
    浏览(33)
  • ajax请求的时候get 和post方式的区别?

    在 AJAX 请求中,GET 和 POST 是两种常用的请求方法,它们在发送请求时有一些区别: GET 请求: GET 请求用于向服务器请求获取指定资源,请求参数会附加在 URL 的末尾,以查询字符串的形式出现。 GET 请求将请求参数暴露在 URL 上,因此在浏览器的地址栏、历史记录等地方可见

    2024年02月08日
    浏览(34)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(43)
  • JavaScript中最重要的一环之一,ajax发送请求!!

    如需向服务器发送请求,我们使用 XMLHttpRequest 对象的  open()  和  send()  方法: 方法 描述 open( method ,  url ,  async ) 规定请求的类型 method :请求的类型:GET 还是 POST url :服务器(文件)位置 async :true(异步)或 false(同步) send() 向服务器发送请求(用于 GET) send( stri

    2024年01月17日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包