使用原生AJAX请求数据

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

一、什么是AJAX

AJAX英文全称 Asynchronous Javascript And XML(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构,AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载。

AJAX是异步的JavaScript和XML;

AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;
AJAX是一种独立于Web服务器软件的浏览器技术;
AJAX不是一种新的编程语言,而是一种技术;
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据(前端后端交互);
AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求)。

二、AJAX请求数据的步骤

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据。
XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

步骤:

1. 第一步:创建XMLHttpRequest的实例对象

var xhr = new XMLHttpRequest();

2. 第二步:xhr.open(提交方式,url,true)

第二步参数详解:
第一个参数:
指定HTTP方法或动作,这个字符串不区分大小写,通常大家用大写字母来匹配HTTP协议。
取值有:GET、POST、HEAD、DELETE、OPTIONS、PUT
我们一般常用的有GET和POST请求:
GET:用于常规请求,适用于URL完全指定请求资源,请求对服务器没有任何副作用,服务器的响应是可缓存的。
POST:用于HTML表单,它在请求主体中包含额外数据,且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同,同时不应该缓存使用这个方法的请求。
第二个参数:
URL,它是请求的主体,是相对于文档的URL。跨域请求会报错。
第三个参数:
Boolean类型的值,如果值为false代表同步请求,send()方法将阻塞直到请求完成。如果这个参数是 true 或省略,则表示请求是异步的。
xhr.open(‘get’,‘http://127.0.0.1:8080/MyMavenProject_war/UserinfoServlet?user_key=fd3270a0a9833e20’)

3. 第三步:设置请求头 xhr.setRequestHeader()

在AJAX中,如果需要像 HTML 表单那样 POST 数据,需要使用 setRequestHeader() 方法来添加 HTTP 头。
然后在 send() 方法中规定需要希望发送的数据:setRequestHeader()方法需要在open()和send()方法之间调用。
语法:
xhr.setRequestHeader(属性名称, 属性值);
使用:
(1)发送json格式数据:
xhr.setRequestHeader(‘Content-type’, ‘application/json; charset=utf-8’);
(2)发送表单数据:
xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded; charset=utf-8’);
(3)发送纯文本(不指定Content-type时,此是默认值):
xhr.setRequestHeader(‘Content-type’, ‘text/plain; charset=utf-8’);
(4)发送html文本:
xhr.setRequestHeader(‘Content-type’, ‘text/html; charset=utf-8’);

4. 第四步:发送请求 xhr.send()

send()方法
参数:
请求主体内容。如果没有,为null,或者省略不写。
xhr.send(); //调用send()之后,请求就会发送到服务器
在send中传入字符串也可以。
xhr.send(“methodtype=3&username=”+username)

5. 第五步:接收响应

可以在send()之前设置响应函数,xhr.onreadystatechange=getMessage;
发送请求后,会收到响应,收到响应后,XHR对象的以下属性会被填充上数据:
responseText:作为响应体返回的文本。
responseXML:如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应数据的 XML DOM 文档。
status:响应的 HTTP 状态。
200 OK:客户端请求成功。
400 Bad Request:客户端请求有语法错误,不能被服务器所理解。
401 Unauthorized:请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden:服务器收到请求,但是拒绝提供服务。
404 Not Found:请求资源不存在,举个例子:输入了错误的URL。
500 Internal Server Error:服务器发生不可预期的错误。
503 Server Unavailable:服务器当前不能处理客户端的请求,一段时间后可能恢复正常,举个例子:HTTP/1.1 200 OK(CRLF)
statusText:响应的 HTTP 状态描述。

readyState:返回HTTP请求状态

“0” 表示open()尚未调用
“1” 表示open()已调用
“2” 表示接收到头信息
“3” 表示接收到响应主体
“4” 表示响应完成
readystatechange:请求状态改变事件。当readyState值改变为4或服务器的响应完成时,所有的浏览器都触发该事件
响应解码 MIME-TYPE:
MIME类型为text/plain,text/html,text/css 文本类型时,可以使用responseText属性解析。
MIME类型为XML文档类型时,使用responseXML属性解析。
如果服务器发送对象,数组这样的结构化数据作为其响应,他应该传输JSON编码的字符串数据。通过responseText接受到它,可以把它传递给JSON.parse()方法来解析。

xhr.onreadystatechange = function () {
    //请求发送完成 && 请求成功
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.responseText);
	}
}

整体演示AJAX发起请求

var xmlHttp = false;
function ajaxdemo() {
    //alert("123")
    //window.ActiveXObject 判断浏览器是否是IE浏览器
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        console.log("microsoft")
    }else if(window.XMLHttpRequest){
        //调用js中的window.XMLHttpRequest对象
        xmlHttp = new XMLHttpRequest();
        console.log("chrome")
    }
    if(xmlHttp){//对象创建成功,获取文本框的信息,发送给服务端
        var username =  document.getElementById("username").value;
        console.log(username)
        var url = "http://127.0.0.1:8080/MyMavenProject_war/UserinfoServlet"
        //向服务端发起请求
        //参数1:请求方式
        //参数2:请求地址
        //参数3:开启异步提交
        xmlHttp.open("post",url,true)
        //设置响应信息
        xmlHttp.onreadystatechange=getMessage;
        //设置发送信息头协议
        xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8');
        //提交数据
        xmlHttp.send("methodtype=3&username="+username)

    }
}
function getMessage() {
    if(xmlHttp.readyStat==4){
        //响应状态
        /*
        * 0未初始化
        * 1读取中
        * 2已读取
        * 3交互中
        * 4完成
        * */
        if(xmlHttp.status == 200){
            //协议码
            /*
            * 404 资源未找到
            * 500 服务端错误
            * 200 成功
            * */
            //获取服务器端响应的数据
            var responsevalue = xmlHttp.responseText;
            //对响应文本进行判断
            if(responsevalue=="yes"){
                //用户名已存在
                document.getElementById("usernamemes").innerHTML = "用户名已存在"
                //document.getElementById("username").focus();
            }else{
                //用名可以使用
                document.getElementById("usernamemes").innerHTML = "用户名可以使用"
            }
        }
    }
}

Servlet代码

@WebServlet("/UserinfoServlet")
public class UserinfoServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
       		//判断客户端要做什么操作
       		 String methodtype = request.getParameter("methodtype");
    
            System.out.println("以ajax方式访问了服务端");
            response.setContentType("text/html");
            //设置响应头协议,无缓存
            response.setHeader("Cache-Control","no-cache");
            //response.setHeader("Access-Control-Allow-headers","*");
            //response.setHeader("Access-Control-Allow-Origin","*");
            response.getWriter().print("no");
        }else{

        }
    }

测试效果,文本框输入用户名,光离开触发脚本,实现效果
使用原生AJAX请求数据

三、常用请求的使用

1、使用get发送无参请求

<body>
  <button onclick="getData()">获取数据</button>
  <script>
    function getData() {
      // 1、创建XMLHttpRequest实例对象
      var xhr = new XMLHttpRequest()
      // 2、打开一个连接
      xhr.open('get','https://127.0.0.1:8080/xianzhi/api/xz?user_key=123123')
      // 3、设置请求头的格式(这里不需要)
      // requestHeader()
      // 4、发送请求
      xhr.send()
      // 5、接受响应数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 转换为JSON对象
          var res = JSON.parse(xhr.responseText)
          // 创建DOM节点
          var div = document.createElement('div')
          //数据赋值
          div.innerHTML = res.data.content
					// 将节点添加到DOM结构中
          document.body.appendChild(div)
        }
      }
    }
  </script>
</body>
 

2、使用get发送有参请求

<!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>Document</title>
	<!-- 引入qs序列化工具 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
</head>
 
<body>
	<!-- 输入框 -->
	<input type="text" name="" id="inp">
	<!-- 获取数据的按钮 -->
	<button onclick="getWeatherData()">获取天气数据</button>
	<script>
		// 获取用户输入的值
		var inp = document.getElementById('inp')
		var cityName;
		inp.oninput = function () {
			cityName = this.value
		}
 
		function getWeatherData() {
			var request = new XMLHttpRequest()
 
			// 第一种方式 拼接字符串
			// request.open('get', 'https://127.0.0.1:8080/xianzhi/api/tianqi?city=' + cityName + '&type=1&tianqi_key=123123')
 
			// 第二种方式 封装参数对象
			var params = {
				city: cityName,
				type: 1,
				api_key: '123123'
			}
			//Qs.stringify()可以将对象转换成查询字符串
			request.open('get', 'https://127.0.0.1:8080/xianzhi/api/tianqi?' + Qs.stringify(params))
 
			request.send()
			request.onreadystatechange = function () {
				if (request.readyState === 4 && request.status === 200) {
					// console.log(request.responseText);
					var res = JSON.parse(request.responseText)
					// console.log(res);
					alert(`${cityName}的温度是${res.data.temp}`)
				}
			}
		}
	</script>
</body>
 
</html>

3、使用post发送无参请求

和get无参请求一样,只要把get改成post即可:

<body>
  <button onclick="getData()">获取数据</button>
  <script>
    function getData() {
      var xhr = new XMLHttpRequest()
      xhr.open('post','https://127.0.0.1:8080/xianzhi/api/xiaohua?api_key=fd3270a0a9833e20')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText));
          var res = JSON.parse(xhr.responseText)
          var div = document.createElement('div')
          div.innerHTML = res.data.content
          document.body.appendChild(div)
        }
      }
    }
  </script>
</body>

4、使用post发送有参请求
登录的时候会使用post发送有参请求:文章来源地址https://www.toymoban.com/news/detail-503226.html

<body>
  <button onclick="login()">登录</button>
  <script>
    function login() {
      var request = new XMLHttpRequest()
      request.open('post','登录接口地址')
      // 配置参数
      var params = {
        username: 'xxxx',
        password: 'xxxx'
      }
      // 设置请求头
      request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
      request.send(JSON.stringify(params))
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
        }
      }
    }
  </script>
</body>

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

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

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

相关文章

  • 原生 Ajax 发送请求

    1. 创建

    2024年02月09日
    浏览(62)
  • 【Ajax】笔记-POST请求(原生)

    html 服务server.js post请求携带参数,是在发送请求的时候携带的 设置请求头一般传递用户身份识别信息

    2024年02月16日
    浏览(46)
  • 前端如何中断请求 ( axios、原生 ajax、fetch)

    使用场景 在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景: 比如 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这

    2024年02月04日
    浏览(50)
  • 【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据

    CSDN话题挑战赛第2期 参赛话题:面试宝典   Aic山鱼与你一起学前端😊 🖱 ⌨个人主页:山鱼的个人主页 欢迎大家加入我的个人社区——山鱼社区 如果对你有帮助的话希望三连下👍⭐✍支持一下博主🌊 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取

    2023年04月12日
    浏览(39)
  • 使用ajax向服务器发起post请求(提交数据给服务器)

     一、jQuery中发起Ajax请求的三种方法:        功能 简介:         1、$get():功能单一,专门用来发起get请求,从而将服务器上的资源“请求”到客户端来进行使用。         2、$post():功能单一,专门用来发起post请求,从而向服务器“提交”数据。         3、$ajax():是

    2024年02月12日
    浏览(46)
  • 【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日
    浏览(46)
  • 数据请求之AJAX

    目录 (一)网页如何请求数据 (二)资源的请求方式 (三)AJAX 1、什么是AJAX: 2、AJAX的应用场景: 3、Ajax请求中常用的三种方法 (四)接口 (五)XMLHttpRequest 1、使用xhr发起get请求(原生ajax) 2、使用xhr发起 post请求 (六)数据交换格式 1、XML 2、JSON (七)XMLHttpRequest Le

    2024年02月04日
    浏览(32)
  • 【Ajax】笔记-使用fetch函数发送AJAX请求

    fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求,本文章向大家介绍fetch()的用法,主要包括fetch()的用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 Fetch() 是 window.fetch 的 JavaScript polyfill。 全局 fetc

    2024年02月15日
    浏览(41)
  • AJAX异步请求&JSON数据格式

    目录 前言 1.AJAX的实现方式 1.1原生的js实现方式 1.2JQuery实现方式 2.1语法 3.JSON数据和Java对象的相互转换 3.1将JSON转换为Java对象 3.2将Java对象转换为JSON AJAX:ASynchronous JavaScript And XML    异步的JavaScript 和 XML。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技

    2024年02月16日
    浏览(42)
  • 【原生Ajax】全面了解xhr的概念与使用。

    ✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习 xhr是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jquery的ajax函数,就是基于xhr对象封装出来的。

    2024年02月02日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包