原生Ajax详解--发送请求步骤详细剖析 ！！！

最新推荐文章于 2023-09-06 18:57:23 发布
最新推荐文章于 2023-09-06 18:57:23 发布
阅读量301 收藏 5
点赞数 3
分类专栏： jQuery 学习笔记 服务器与AJAX 文章标签： ajax js javascript post jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44586544/article/details/106021590
版权

发送Ajax请求步骤：

1、创建XMLHttpRequest对象
2、准备发送
3、执行发送动作
4、指定回调函数

第一步：创建XMLHttpRequest对象

// 1、创建XMLHttpRequest对象
var xhr = null;
 if (window.XMLHttpRequest) {
   xhr = new XMLHttpRequest(); //标准
 } else {
   xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
   //IE6 没有XMLHttpRequest对象，可以采用上面的方式达到相同的效果 ！！！
 }

第二步：准备发送

xhr.open(参数一,参数二,参数三)
/*
参数一：请求方式（get获取数据；post提交数据）
参数二：请求地址
参数三：同步或者异步标志位，默认是true表示异步，false表示同步

如果是get请求那么请求参数必须在url中传递
encodeURI()用来对中文参数进行编码，防止乱码
*/

先说 get 请求 ：
前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }
        // 2、准备发送
        /*
        参数一：请求方式（get获取数据；post提交数据）
        参数二：请求地址
        参数三：同步或者异步标志位，默认是true表示异步，false表示同步

        如果是get请求那么请求参数必须在url中传递
        encodeURI()用来对中文参数进行编码，防止乱码，可以不用，不会出现乱码
        */
        var param = 'username=' + uname + '&password=' + pw;
        xhr.open('get', './03get.php?' + param, true);
        // 3、执行发送动作
        xhr.send(null); //get请求这里需要添加null参数
        // 4、指定回调函数
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              alert(xhr.responseText);
            }
          }
        }

      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

后端代码：

<?php
$uname = $_GET['username'];
$pw = $_GET['password'];

if ($uname == 'admin' && $pw == '123') {
  echo 1;
} else {
  echo $uname;
}

再来说 post 请求 ：

前端代码 ：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }
        // 2、准备发送
        /*
        参数一：请求方式（get获取数据；post提交数据）
        参数二：请求地址
        参数三：同步或者异步标志位，默认是true表示异步，false表示同步
        
        post请求参数通过send传递，不需要通过encodeURI()转码
        必须设置请求头信息
        */
        var param = 'username=' + uname + '&password=' + pw;
        xhr.open('post', '04post.php', false);
        // 3、执行发送动作
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(param); //post请求参数在这里传递，并且不需要转码
        // 4、指定回调函数
        console.log(123)
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              console.log(xhr.responseText)
              alert(xhr.responseText);
            }
          }
        }
      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

后端代码 ：

<?php
$uname = $_POST['username'];
$pw = $_POST['password'];

if ($uname == 'admin' && $pw == '123') {
  echo 1;
} else {
  echo $uname;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }
        // readyState=0表示xhr对象创建完成
        console.log(xhr.readyState + '----------1-----------');
        // 2、准备发送
        /*
        参数一：请求方式（get获取数据；post提交数据）
        参数二：请求地址
        参数三：同步或者异步标志位，默认是true表示异步，false表示同步
        
        post请求参数通过send传递，不需要通过encodeURI()转码
        必须设置请求头信息
        */
        var param = 'username=' + uname + '&password=' + pw;
        xhr.open('post', '04post.php', true);
        // 3、执行发送动作
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(param); //post请求参数在这里传递，并且不需要转码
        // 4、指定回调函数
        // readyState=1表示已经发送了请求
        console.log(xhr.readyState + '----------2-----------');
        // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
        xhr.onreadystatechange = function () {
          /*
          readyState:
          2 浏览器已经收到了服务器响应的数据
          3 正在解析数据
          4 数据已经解析完成，可以使用了
          */
          console.log(xhr.readyState + '----------3-----------');
          // 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
          if (xhr.readyState == 4) {
            // http的常见状态码
            /*
            200表示响应成功
            404没有找到请求的资源
            500服务器端错误
            */
            // 200表示服务器返回的数据是正常的，不是200的话表示数据是错误的
            if (xhr.status == 200) {
              // 这里的200表示数据是正常的
              alert(xhr.responseText);
              // xhr.responseXML
            }
          }
        }

      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

第三步：执行发送动作

xhr.send(null); //get请求这里需要添加null参数
xhr.send(param); post请求参数在这里传递，并且不需要转码

第四步：指定回调函数

先来看下面的代码 ：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }
        // readyState=0表示xhr对象创建完成
        console.log(xhr.readyState + '----------1-----------');
        // 2、准备发送
        /*
        参数一：请求方式（get获取数据；post提交数据）
        参数二：请求地址
        参数三：同步或者异步标志位，默认是true表示异步，false表示同步
        
        post请求参数通过send传递，不需要通过encodeURI()转码
        必须设置请求头信息
        */
        var param = 'username=' + uname + '&password=' + pw;
        xhr.open('post', '04post.php', true);
        // 3、执行发送动作
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(param); //post请求参数在这里传递，并且不需要转码
        // 4、指定回调函数
        // readyState=1表示已经发送了请求
        console.log(xhr.readyState + '----------2-----------');
        // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
        xhr.onreadystatechange = function () {
          /*
          readyState:
          2 浏览器已经收到了服务器响应的数据
          3 正在解析数据
          4 数据已经解析完成，可以使用了
          */
          console.log(xhr.readyState + '----------3-----------');
          // 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
          if (xhr.readyState == 4) {
            // http的常见状态码
            /*
            200表示响应成功
            404没有找到请求的资源
            500服务器端错误
            */
            // 200表示服务器返回的数据是正常的，不是200的话表示数据是错误的
            if (xhr.status == 200) {
              // 这里的200表示数据是正常的
              alert(xhr.responseText);
              // xhr.responseXML
            }
          }
        }

      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

下面是 php代码：

<?php
$uname = $_POST['username'];
$pw = $_POST['password'];

if ($uname == 'admin' && $pw == '123') {
  echo 1;
} else {
  echo $uname;
}

控制台运行结果如下图所示：
指定回调函数
小结：

1. readyState=0表示xhr对象创建完成
2. readyState=1表示已经发送了请求
3. readyState:
    =2 浏览器已经收到了服务器响应的数据
    =3 正在解析数据
    =4 数据已经解析完成，可以使用了
注意： 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的

xhr.status == 200 表示服务器返回的数据是正常的，不是200的话表示数据是错误的

http的常见状态码：
200 表示响应成功
404 没有找到请求的资源
500 服务器端错误

如果这篇文章能够帮助到你，希望您不要吝惜点赞 ，您的支持是我继续努力的动力 ！！！

帅帅邬同学
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现ajax与ajax的跨域请求实例
11-27
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){ console.log(ajax.r
php下的原生ajax请求用法实例分析
10-15
主要介绍了php下的原生ajax请求用法,结合实例形式分析了前台原生ajax请求与后台PHP响应相关操作技巧,需要的朋友可以参考下
详解ApplePay：一大波iOS原生应用正在逼近！
03-03
ApplePay不仅有TouchID指纹识别技术护航，支持AppleWatch，更有可观的iTunes信用卡绑定数量奠定其庞大的市场基础。本文从工作原理、安全性、适用范围、IAP到局限性及发展前景，详细解读ApplePay方方面面。在苹果新品发布会上，iPhone6以及出人意料的大屏iPhone6Plus终于在“千呼万唤”中娓娓登场，可惜这老戏码没能唱出新意来，倒是自家新出的智能手表AppleWatch还有那么点儿意思。除此之外，众人还将目光投向了苹果全新移动支付系统——ApplePay。ApplePay与诸多传统移动支付系统不同，不但有TouchID指纹识别技术护航，还能在AppleWatc
原生js php ajax,原生Ajax怎么写
weixin_35378583的博客
03-25 160
写原生Ajax的方法：首先创建XMLHttpRequest对象；然后编写回调函数onreadystatechange；接着配置请求信息；最后发送请求即可。Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出...
ajax请求服务回调,Ajax请求
weixin_32115639的博客
08-05 403
原生Ajax请求一、创建XMLHttpRequest对象var xhr = null;if(window.XMLHttpRequest){//标准浏览器xhr = new XMLHttpRequest();}else{//早期的IE浏览器xhr = new ActiveXObject("Microsoft.XMLHTTP");}二、准备发送请求-配置发送请求的一些行为xhr.open('get',...
原生ajax请求
罗先生
07-12 2769
原生ajax的步骤： 1.创建一个XMLHttpRequest的对象. 2.通过open（）与服务器建立连接。 3.使用send（） 来发送请求。 4.使用onreadystatechange事件来监听。如果表示readystate4就说明解析成功， 且status200(状态码成功)，就说明与后台搭建成功。 5.使用responseText来获取服务器返回的数据 兼容： IE6以下 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建
JS原生：XMLHttpRequest发送GET&POST请求
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
猿创征文 | 如何使用原生AJAX请求数据
叶子yes的博客
08-28 1715
AJAX英文全称 Asynchronous Javascript And XML（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。......
xhr发起POST请求（原生）
m0_50599032的博客
12-04 6235
1.创建xhr对象 var xhr = new XMLHttpRequest() 2.调用open（） xhr.open(‘POST’,‘请求的地址’ ) 3. 设置Content-Type 属性（注意这是固定写法） xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’) 4.调用send（） (若果要提交数据，以字符串的形式提交) 例：xhr.send(‘name-张三&age-18&sex-男’
JavaScript案例-原生ajax
02-16
JavaScript案例-原生ajax
第1讲：XMLHttpRequest详解（ajax基础）
软件之家的博客
06-09 2430
XMLHTTPRequest对象，是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通讯。自从浏览器提供了XMLHTTPRequest这个接口之后，ajax操作就此诞生。本讲详细介绍XMLHTTPRequest对象的使用方法，各种属性的使用及实现的详细步骤。
XHR——XMLHttpRequest对象
weixin_33816821的博客
08-11 291
XHR——XMLHttpRequest对象 创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest 不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成...
[ASP.NET]创建XMLHttpRequest对象
Stephanie翟倩
01-17 616
XMLHttpRequest
原生js实现ajax请求（带请求头header）和数据传参过程代码
热门推荐
CodingNoob
07-02 7万+
一、Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的简写 Ajax是一门技术，并不是一门语言 使用XHTML+CSS来标准化呈现 使用XML和XSLT进行数据交换及相关操作 使用XMLHttpRequest对象与Web服务器进行异步数据通信 使用Javascript操作Document Object Model进行动态显示及交互 使用J...
原生js的ajax请求
qq_56743396的博客
07-13 966
在状态改变的处理函数一般针对 readyState == 4 且 status == 200 的情况才处理，再根据后台返回的数据类型决定从 responseText 或者 responseXML 获取服务器响应回去来的数据。​ 3、给这个ajax对象绑定监听状态改变函数，在处理函数可获取响应数据，ajax.onreadystatechange。JS的Ajax对象：XMLHttpRequest 对象用于在后台与服务器交换数据。responseText 获得字符串形式的响应数据。
原生的AJAX请求
qq_44849271的博客
03-20 8199
AJAX概念 AJAX全称：Asynchronous Javascript And XML。AJAX并不是一种新的编程语言，是一种技术。AJAX实现了页面不需要刷新也能获取数据。 使用AJAX技术，关键在于XMLHttpRequest对象。 AJAX是异步操作 Demo: let xmlhttp=new XMLhttpRequest();//创建 XMLhttpRequest 对象 xmlhttp.open("请求方式","请求资源的地址"); xmlhttp.send();//发送请求 xmlhtt
原生 Ajax 发送请求
最新发布
虎康的博客
09-06 358
为 200 时，表明请求成功，可以在回调函数中处理返回的数据。readyState请求准备状态，共有四个值1-4,1表示xhr创建 2表示数据处理完成 3表示请求已发送。原生的ajax，get没有params，所以，直接拼接到url上。查询字符串 queryString。如果是post请求，原生ajax，需要设置一个请求头，告诉后端，我发送的数据是什么格式的。后端接口文档中写了需要什么样格式的数据！，我们照着设置就好了。表示请求返回的状态码。
原生js发送ajax请求---ajax请求篇（一）
smallmww的博客
08-10 2351
在原生js中我们使用的是XMLHttpRequest对象来发送ajax请求。1.创建XMLHTTPRequest对象。2.使用open方法设置和服务器的交互信息。二、也可以对原生js发送ajax请求进行封装。3.设置发送的数据，开始和服务器端交互。以上就是使用原生方式的ajax请求。
发送原生ajax请求步骤
04-01
5. 发送请求 6. 处理响应数据 示例代码： ``` var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值