JS发送Http请求—

1.AJAX的引入

JS 缺乏 主动发起 Http请求 的能力，因此需要代码片段让JS发起Http请求，我们称这样的代码片段为——AJAX（Asynchronous JAvaScript by Xml ）
AJAX借助 JS 中的一个内置对象：XMLHttpRequest，可简写为xhr

2.AJAX的代码片段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Ajax 请求</title>
</head>
<body><script><!-- js发送http请求 利用相应的代码片段-->var xhr=new XMLHttpRequest(); <!-- 初始化js中的内置对象XMLHttpRequest-->xhr.open("post","/hhhhhhh");<!-- 提供HTTP请求的 方法和url-->xhr.send();<!-- 发起真正的请求-->
</script>
</body>
</html>

在上面的代码完成后，即完成了由JS构建的请求-响应，接下来需要考虑：当请求-响应完成时（对应事件为 XMLHttpRequest中的load），如何利用JS代码读取响应的数据，这里将用到事件绑定（元素、事件、函数）

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Ajax 请求</title>
</head>
<body><script>// js发送http请求 利用相应的代码片段-->var xhr=new XMLHttpRequest(); // 初始化js中的内置对象XMLHttpRequest-->//定义 事件绑定中的函数，定义在xhr实例化之后，因为函数中需要xhrfunction success() {console.log("完成请求-响应啦！！！！！！！") //请求响应成功后再打印console.log(xhr.responseText) //拿到 响应的响应体信息,响应正文console.log(xhr.status)       //拿到请求的响应状态码}xhr.onload=success;//当请求响应完成后，去执行success函数xhr.open("get","/delay");// 提供HTTP请求的 方法和url-->xhr.send();// 发起真正的请求-->console.log("ajax请求已发送")//先打印
</script>
</body>
</html>

后端代码：

package servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.concurrent.TimeUnit;@WebServlet("/delay")
public class DelayServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//增加延时，在输出响应try {TimeUnit.SECONDS.sleep(3);} catch (InterruptedException e) {e.printStackTrace();}//输出些 响应resp.setCharacterEncoding("utf-8");resp.setContentType("text/plain");resp.getWriter().println("看这里！！！！！！！！！！！");}
}

3.通过Ajax 向后端传递数据

没有Ajax之前向后端传递数据：利用form表单

Ajax在模拟实现第一种方式时，JS在URL中组织queryString即可，但是这种人为规定的模拟实现方法，在字符串切割时往往会存在一定问题。因此需要引入一种标准的结构化数据格式——Json

JS发送Http请求——AJAX相关推荐

使用js发送post请求
使用js发送post请求 1.先将需要传递的参数封装 2.然后调用提前封装好httpPost方法即可 var params = {"startTime": startTime,& ...
【js】js发送get请求
用原生js发送网络请求 var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象httpRequest.open('GET', 'url', true) ...
封装js发送http请求
封装js发送http请求 var http = {};http.quest = function (option, callback) {var url = option.url;var method ...
Node.js发送HTTP请求
在Node.js中发送HTTP请求,用的比较多的是request组件,该组件的功能非常强大,但是该组件需要通过回调函数的方式获取操作的结果. 由于现在Node.js对ES6已经支持的比较好了,我们更希 ...
ajax js 轮询请求,ajax的轮询和长轮询
概念: 轮询环行进端处触码通法果泉位可近境其行框理发(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭览页些求时是过解些这确如目前例总站回广随能4 ...
原生html如何发送网络请求,原生JS发送HTTP请求的方式：XMLHttpRequest.send()
在前端开发过程中,就目前来看,发送HTTP请求,大家习惯在框架里去应用,比如vue,react等.我们在往前追朔下,用的最多的是jQuery里的ajax.但是最原始的发送HTTP请求方式是什么呢?一起 ...
最简单的方式使用原生 js 发送 http 请求
使用场景检查接口可用性主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求. 这在判断是否存在跨域问题的场景下,特别好用. 验证 ...
html js发送http请求数据格式,JS获取url参数,JS发送json格式的POST请求方法
一.获取url所有参数值 function US() { var name, value; var str = location.href; var num = str.indexOf("? ...
js发送https请求问题处理总结
问题1 1.浏览器端无法发送https请求的时候使用nginx进行转发,具体配置比较简单问题2: 构建表单传送数据,提示缺失必要的参数. { "error" : "i ...

JS发送Http请求——AJAX

1.AJAX的引入

2.AJAX的代码片段

3.通过Ajax 向后端传递数据

JS发送Http请求——AJAX相关推荐

最新文章

热门文章