Ajax与Http协议

最新推荐文章于 2022-11-29 23:16:14 发布
最新推荐文章于 2022-11-29 23:16:14 发布
阅读量794 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yllmyl/article/details/80258355
本文深入讲解了Ajax模块在网络请求中的应用，包括创建Xhr对象、发出HTTP请求、接收及处理服务器回传的数据等核心步骤，并提供了详细的代码示例。同时探讨了同步与异步请求的区别及其对浏览器的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.ajax 模块在处理网络请求的时候包括以下四个步骤：

（1）创建Xhr对象

（2）发出HTTP请求

（3）接收服务器回传的数据

（4）更新网页数据

补充：ajax可以付出同步请求，也可以发出异步请求。

          但大多数情况下指的是异步请求，因为同步的ajax请求对浏览器会产生“阻塞效应”。

<?php

       var xhr= newXHLHttpRequest();

       xhr.onreadystatechange=function(){

          if(xhr,readyState==4){

               if(xhr.statuas==200){

                    console.log(JSON.panrse(xhr.responseText));

              }else{

                    console.error(xhr.statusText);

               }

        }

   }

   xhr.onerror=function(e){

             console.error(xhr.statusText);

   }；

    xhr.open('GET','ajax.php',true);

    xhr.timeout=5000;

    xhr.send(null);


 2.

    在Ajax规则中，"请求"从创建到被发送需要至少经历如下几个步骤：
通过XMLHttpRequest类创建xhr对象
为xhr对象添加属性与回调方法
令xhr对象执行open()方法，指明请求被发往某处
令xhr对象执行send()方法，发出请求。

   

   3. xhr对象的常用属性与方法

            在整体感知中我们看到的例子中的属性和方法，基本都是要掌握的内容。或许有一些内容

     并没有体现在上面，但相信我他们都会是你今后离不开的东西。

          （1）onreadystate属性  语法：xhr.onreadystatechange=function(){};

          （2）readyState属性 语法： xhr.onreadystatechange=function(){

                                                      if(xhr.readyState==n){

                                                           //执行对应的函数

                                                       }

                                               }

             值为4,对应常量DONE,表示服务器数据已经完全接收，或者本次接收已经失败了。

          （3）status属性

                       语法：  if（xhr.readyState==n){

                                           if(xhr.status==200){

                                                //通信成功

                                           }

                                      }

                                    200是正常访问

                                  本属性是只读属性

          （4）statuesText属性

                               xhr.statusText

          （5）responseText属性

                               xhr.responseText

          （6）open()方法

                               xhr.open("请求类型’,'url地址’，‘是否异步’）；

          （7）setRequestHeader()方法

          （8）send()方法

                         xhr.send(formData);

    4.xhr对象发送post请求

           var  formData=new FormData();

           formData.append('key',value);

           xhr.send(formData);


           var userName = document.querySelector('.userName').value;
    var password = document.querySelector('.password').value;
    var formData = new FormData();
    formData.append('userName',userName);
    formData.append('password',password);


  5. xhr 对象的兼容性问题

         标准浏览器支持的方法为：XMLHttpRequest()

         IE浏览器支持的方法为：ActiveXObject()

         if(window.XMLHttpRequest){

               xhr=new XMLHttpReuest();

         }else if(window.ActiveXObject();

         }

          可以直接使用三目运算符解决
    xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

6. 请求超时timeout与超时监听ontimeout

           xhr.timeout=xxx;

           xhr.ontimeout=function(){

                         console.err('The request for'+url地址+‘timed out’);};

            xhr,time=5000;//5秒后超时

            xhr.ontimeout=function(){

                           console.error('The request for'+ajax.php+'timed  out.');

            };

7.登录post 请求实例

          原生的登录HTML：

                       <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>


</head>
<body>
  <label for='username'>
     <span>账户：</span><input type="text" id="username" 
     placeholder="请在此输入用户名"/>
   </label>
   <br/>
   <label for="password">
      <span>密码：</span><input type="text" id="password"
      placeholder="请在此输入密码"/>
   </label>
   <br/>
   <button>登录</button>
   <script type="text/javascript">
  var usernameInput = document.querySelector('#username');
var passwordInput = document.querySelector('#password');
var btn = document.querySelector('button');
btn.onclick = function (){
var username = usernameInput.value;
var password = passwordInput.value;
if(username.length==0||password.length==0){
alert('用户名或密码不能为空！！');
return;
}
//ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
var resObj = JSON.parse(xhr.responseText); 
// console.log(resObj);
if(resObj.code){
alert('登录成功，欢迎回来'+resObj.username);
}else{
alert('登录失败');
}
}else{
console.log(xhr.statusText);
}
}
};
//构造formData
var formData = new FormData();
formData.append('uname',username);
formData.append('upass',password);
//基本设置
xhr.open('post', 'denglu.php', true);
xhr.send(formData);
};
 
    </script>
  </body>
</html>

 原生的登录php:


<?php
  $success = array('msg'=>'OK');//code字段用来表示是否登录成功，1表示成功，0表示失败
$username = $_POST['uname'];
$password = $_POST['upass'];


//把数据库中所有的信息检索出来
$con = mysqli_connect('localhost','root','','studb');
if($con){
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
//
$sql = "select * from stud where 1";
$result = $con->query($sql);
//
if($result->num_rows>0){
$info = [];
for($i=0; $row=$result->fetch_assoc(); $i++){
$info[$i] = $row;
}


//判断逻辑，判断数组信息中是否有和用户发来的内容匹配的选项
$flag = 0;
for($j=0; $j<count($info); $j++){
if($info[$j]['stuName'] == $username){
if($info[$j]['stuAge'] == $password){
$flag = 1;
break;
}
}
}
$success['code'] = $flag;
//ps
if($flag){
$success['username'] = $username;
}
        }
}
          echo json_encode($success);

?>


 PDO 登录HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pod登录</title>
</head>
<body>
<label for="username">
     <span>账户：</span><input type='text' id='username' placeholder='请在此输入用户名' value='lily'>
</label>
<br/>
<label for="password">
     <span>密码：</span><input type='text' id='password' placeholder='请在此输入密码' value='19'>
</label>
<br/>
<button>登录</button>
<script  type='text/javascript'>
    var usernameInput = document.querySelector('#username');
var passwordInput = document.querySelector('#password');
var btn = document.querySelector('button');
btn.onclick = function (){
var username = usernameInput.value;
var password = passwordInput.value;
if(username.length==0||password.length==0){
alert('用户名或密码不能为空！！');
return;
}


// ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
var resObj = JSON.parse(xhr.responseText); 
console.log(resObj);
if(resObj.code){
alert('登录成功，欢迎回来'+resObj.username);
}else{
alert('登录失败');
}
}else{
console.log(xhr.statusText);
}
}
};
//构造formData
var formData = new FormData();
formData.append('uname',username);
formData.append('upass',password);
//基本设置
xhr.open('post', 'poddenglu.php', true);
xhr.send(formData);
};   
       </script>
    </body>

</html>

PDO登录php:

<?php
       $success=array('msg'=>'OK');
       $username=$_POST['uname'];
       $password=$_POST['upass'];
       // 
       // $username='lily';
       // $password='19';


       class singletonPDO{
private static $pdo = null;
public static function getPdo (){
if(self::$pdo == null){
try {
self::$pdo = new PDO("mysql:host=localhost;dbname=studb","root","");
} catch (Exception $e) {
echo '出现错误:'.'<br/>';
echo $e->getMessage();
}
}
return self::$pdo;
}
}
    
$pdo = singletonPDO::getPdo();
$pdo->exec('set names utf8');
          $sql="select * from stud where 1";
          $pdoso=$pdo->prepare($sql);
          $pdoso->execute();


          $pdoso->bindColumn(1,$stuName);
          $pdoso->bindColumn(2,$stuGender);
          $pdoso->bindColumn(3,$stuAge);
          $pdoso->bindColumn(4,$stuNumber);
          $pdoso->bindColumn(5,$stuScroe);




          // echo "<pre>";
          $info=[];
          for($i=0; $pdoso->fetch(PDO::FETCH_COLUMN);$i++){
          $info[$i]=array($stuName, $stuGender, $stuAge, $stuNumber, $stuScroe);
          }


          $flag = 0;
for($j=0; $j<count($info); $j++){
if($info[$j][0] == $username){
if($info[$j][2] == $password){
$flag = 1;
break;
}
}
}
$success['code'] = $flag;
//ps
if($flag){
$success['username'] = $username;
}
          echo json_encode($success);
 ?>

柳LL
关注
《web开发： Ajax Http协议》
yexiang优快云的专栏
01-29 305
一、通信协议 1 什么是通信 通信，就是信息的传递和交换。 通信三要素： 通信的主体 通信的内容 通信的方式 现实生活中的通信 案例：张三要把自己考上传智专修学院的好消息写信告诉自己的好朋友李四。 其中： 通信的主体是张三和李四； 通信的内容是考上传智专修学院； 通信的方式是写信； 互联网中的通信 案例：服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。 其中， 通信的主体是服务器和客户端浏览器； 通信的内容是传智专修学院的简介； 通信的方式是响应； 2 什么是通信协议 通信协议（
前端_网页编程 HTTP协议（进阶）
←か淡定☆ ヾ 的博客
08-30 407
文章目录内容1. HTTP协议简介1.1 什么是通信1.1.1 现实生活中的通信1.1.2 互联网中的通信1.2 什么是通信协议1.2.1 现实生活中的通信协议1.2.2 互联网中的通信协议1.3 HTTP1.3.1 什么是HTTP协议1.3.2 HTTP协议的交互模式2. HTTP请求消息2.1 什么是HTTP请求消息2.2 HTTP请求消息的组成部分2.2.1 请求行2.2.2 请求头部2.2.3 空行2.3.4 请求体2.3.5 小结3. HTTP响应消息3.1 什么是HTTP响应消息3.2 HTTP
AJAX通讯协议
Eric的博客
11-04 5766
和通常了解的不同，AJAX和xml没有什么必然联系，虽然调用的对象名字是XmlHttp。XmlHttp的通讯协议格式仅仅是HTTP协议。 请求格式：GET / HTTP/1.1/r/nAccept: */*/r/nUser-Agent: Mozilla/4.0 (compatible; Win32; WinHttp.WinHttpRequest.5)/r/nHost: localhos
Ajax与HTTP协议
weixin_52102646的博客
10-29 594
HTTP协议与PHP AJAX AJAX全称为(Asynchronous JavaScript and XML),就是异步的JS和XML。 提供AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新 获取数据。 AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML XML可扩展标记语言，被设计用来传输和存储数据 XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 现在使用JSON表示数据。 AJAX的特点
Ajax请求解析：Ajax与Http协议的三次握手与四次挥手详解
本文档深入探讨了基于Ajax请求过程中的HTTP协议的三次握手和四次挥手原理。首先，作者通过实例展示了一个简单的Ajax请求流程，从前端发送请求到后端处理并返回数据，这涉及到网络通信的基础——TCP协议的建立连接...
Ajax Http协议
yexiang优快云的专栏
05-13 317
一、通信协议 1. 什么是通信 通信，就是信息的传递和交换。 通信三要素： 通信的主体 通信的内容 通信的方式 现实生活中的通信 张三要把自己考上清华大学好消息写信告诉自己的好朋友李四。 其中： 通信的主体是张三和李四； 通信的内容是考上清华大学； 通信的方式是写信 互联网中的通信 服务器把清华大学的简介通过响应的方式发送给客户端浏览器。 其中， 通信的主体是服务器和客户端浏览器； 通信的内容是考上清华大学； 通信的方式是响应 2. 什么是通信协议 通信协议（Communication P
net与ajax交互技术—HTTP协议(1).doc
最新发布
07-08
了解HTTP协议是掌握net与ajax交互技术的基础。在Web开发中，AJAX（Asynchronous JavaScript and XML）技术允许客户端脚本异步地向服务器发送请求并接收响应，而不影响页面其他内容的显示和操作。AJAX技术通常与...
AJAX、http传输协议、响应状态码、请求方式
02-06
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行 ———————————————— 版权声明：...
HTTP协议，ajax小记
u012183426的博客
12-03 327
一，HTTP小记： 理解RESTful，了解项目风格，阮一峰博客http://www.ruanyifeng.com/blog/2014/05/restful_api 在network中查看每一次请求和响应过程。 请求方法：GET,POST,PUT,DELETE,HEAD,TRACE,CONNECT,OPTIONS 请求主体：只有POST,PUT请求有主体。形式1：uname = tony&...
ajax协议
05-31 175
localhost/r/nConnection: Keep-Alive/r/n/r/n 应答格式：HTTP/1.1 200 OK/r/n/r/n&lt;br&gt;&lt;br&gt;hello ajax&lt;br&gt; 说明：http协议规定请求和应答都必须有http header，header必须指明HTTP版本。http header以两个换行"/r/n/r/n"作为结束标志。     然后说明一下server端如何影
ajax和http是什么关系,ajax与http关系？
weixin_34239861的博客
08-06 630
阅读前提：所有的网络数据通信都可以这样理解，全部都是http请求，只是不同的端(前端，android，ios)使用不同的方法发起http请求。 HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：协议中规定 POST 提交的数据必须放在消息主体(entity-body)中，但协议并没有规定...
ajax和http请求关系,通过HTTP的HTTP Cookies和Ajax请求
weixin_36310597的博客
08-05 319
我知道以前已经以各种形式提出过这个问题，但是我似乎无法解决这个问题。我尝试使用jQuery和本机JS API发出Ajax请求。我的情况如下(参见附图)：浏览器发出HTTP请求服务器响应并设置持久性Cookie浏览器发出HTTP Ajax请求，Cookie在那里服务器响应预期，更新Cookie浏览器发出HTTPS Ajax请求，Cookie不再存在(？！)由于没有Cookie(意外行为)，服务器会给...
Ajax HTTP协议
QIU的博客
07-26 192
概念: HTTP（HyperText Transfer Protocol，超文本传输协议）最早就是计算机与计算机之间沟通的一种标准协议 随着时代的发展，技术的变迁，这种协议现在广泛的应用在各种领域，也不仅仅局限于计算机与计算机之间 手机、电视等各种智能设备很多时候都在使用这种协议通讯，所以一般现在称 HTTP 为端与端之间的通讯协议 这种协议规范了通讯内容的格式以及各项内容的含义。 HTTP协议分为请求 和响应 两个部分组成: 请求 请求行 协议及版本 请求的地址 [请求的参数] 请求的方式 请求头
前端Ajax基础网络协议
MichaelAn的博客
04-03 621
谈到Ajax，首先需要了解几个常用的协议，基本的服务器和浏览器数据传输关系等。 1.常用的协议 有FTP（文件传输协议）、HTTP（超文本传输协议）、Telnet（远程登录协议）、POP3或者SMTP（邮件传输协议等），前端主要使用HTTP。 2.浏览器和服务器的请求关系 浏览器与服务器之间多次请求响应，完成网页的实际数据传输和渲染工作。 （浏览器首先请求网站主页，服务器返回index.h...
Ajax和http协议
weixin_43786904的博客
01-16 327
AJax和Http协议详解： 在jQuery中已经知道了ajax，并且通过 $.ajax()方法实现了和前后台完成的简单交互。但事实上在工作中jQuery所提供的功能是远远不够的，绝大部分的公司实际上并不希望他们的开发者使用现有的ajax框架，而是选择自行封装一个功能相似但针对性却更强的内容。因此要知道在js内部，ajax到底是怎样工作的。 Ajax全名为Asynchronous javascri...
http 和 ajax 的关系
zk_html的博客
11-29 451
（1）一般请求：浏览器一般会直接显示响应体数据，也就是通常说的 刷新/跳转 页面，也就是说一般请求需要页面刷新。注意： ajax 是一种不刷新页面的请求方式：请求回来数据后 进行 DOM 操作（增删改），不会刷新页面。（2）ajax请求：浏览器不会对界面进行任何更新操作，只是监视其回调函数，并返回相关数据。ajax 请求属于 http 请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值