Ajax——设置请求参数

1.目录结构

2.需求：

点击按钮获取服务端响应的结果

3. 代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax get 请求</title><style>#result{width: 200px;height: 100px;border: solid 1px #6789ad;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');btn.onclick = function (){//测试// console.log('ok')//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');//3.发送请求xhr.send();//4.事件绑定 处理服务端返回的结果//on when 当....时候//resdystatus是xhr对象中的属性，表示状态0 1 2 3 4//change 改变xhr.onreadystatechange = function(){//判断响应状态码 200 404 403 401 500if(xhr.readyState === 4){//2XX表示成功if(xhr.status >= 200 && xhr.status < 300)//处理结果 行 头 空行 体//响应行console.log(xhr.status);console.log(xhr.statusText);//状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response);result.innerHTML= xhr.response;}else{}}}</script>
</body>
</html>

server.js

// 1.引入express
const { request, response } = require('express');
const express = require('express');//2.创建应用对象
const app = express();//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{//设置响应头 设置允许跨域，第二个参数‘*’指的是响应头内容response.setHeader('Access-Control-Allow-Origin','*')//设置响应response.send('hello AJAX')
})//监听端口启动服务
app.listen(8000,()=>{console.log('服务已经启动，8000端口监听中...nodejs');
})

4.结果截图

5.注意点

xhr.onreadystatechange()中的五个状态的意思

0	表示初始化
1	open方法被调用
2	send方法被调用
3	服务端返回部分结果
4	服务端返回所有结果

每一个状态被激活，则调用一次onreadystatechange（）

Ajax——设置请求参数相关推荐

Ajax--请求的基本操作设置请求参数
1.Ajax–请求的基本操作点击发送请求后,会把响应体打印在下面的窗口中 1.1 请求前的准备 1.1.1 HTML页面 ajaxDemo.html <!DOCTYPE html> &l ...
Ajax学习：Ajax设置请求头信息
在前面的学习中: 请求报文的:请求行可以设置,请求体可以设置下面是设置请求头信息响应头的位置在: <script>//获取元素对象const result = document.get ...
ajax的请求参数详解以及前后台交互详解
function rejectSub(){//从隐藏域中拿到userIDvar userId = $("input:hidden[name='userId']").val();va ...
gin ajax 获取请求参数,gin请求参数处理
本章介绍Gin框架获取请求参数的方式 1.获取Get 请求参数 Get请求url例子:/path?id=1234&name=Manu&value=111 获取Get请求参数的常用函数: ...
java请求参数_在Java中发送http的post请求,设置请求参数等等
前几天做了一个定时导入数据的接口,需要发送http请求,第一次做这种的需求,特地记一下子, 导包 import java.text.SimpleDateFormat; import java.util ...
jquery ajax设置头部,jQuery Ajax 设置请求头
今日在项目ajax访问中获取接口地址,出现一个这样的错误: Request header field Access-Token is not allowed by Access-Control-Al ...
gin ajax 获取请求参数,go的gin框架从请求中获取参数的方法
前言: go语言的gin框架go里面比较好的一个web框架, github的start数超过了18000.可见此框架的可信度如何获取请求中的参数假如有这么一个请求: POST /post/te ...
ajax请求到参数太大获取参数失败问题,Ajax请求参数较长导致请求失败
Ajax请求参数比较长,第5行参数大概1100个字符吧,是接口的请求报文. $.ajax({ type:"POST", url:"${ctx}/test.action?m ...
学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据
一.Ajax的基本使用 1.核心对象 XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的. 2.发送ajax请求(4个步骤): 创建xhr对象,然后open方法初始化,设置请求方式 ...

Ajax——设置请求参数

Ajax——设置请求参数相关推荐

最新文章

热门文章