AJAX请求过程

最新推荐文章于 2022-05-13 09:40:54 发布
最新推荐文章于 2022-05-13 09:40:54 发布
阅读量101 收藏
点赞数 2

原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用jQuery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！

Ajax是什么

我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。

Ajax的使用

    (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

(<span class="pl-c1" style="color:rgb(0,134,179);">2</span>)创建一个新的<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">`</span>HTTP<span class="pl-pds">`</span></span>请求,并指定该<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">`</span>HTTP<span class="pl-pds">`</span></span>请求的方法、<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">`</span>URL<span class="pl-pds">`</span></span>及验证信息.

(<span class="pl-c1" style="color:rgb(0,134,179);">3</span>)设置响应<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">`</span>HTTP<span class="pl-pds">`</span></span>请求状态变化的函数.

(<span class="pl-c1" style="color:rgb(0,134,179);">4</span>)发送<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">`</span>HTTP<span class="pl-pds">`</span></span>请求.

(<span class="pl-c1" style="color:rgb(0,134,179);">5</span>)获取异步调用返回的数据.

(<span class="pl-c1" style="color:rgb(0,134,179);">6</span>)使用JavaScript和<span class="pl-c1" style="color:rgb(0,134,179);">DOM</span>实现局部刷新.


<span class="pl-k" style="color:rgb(167,29,93);">var</span> xmlHttp <span class="pl-k" style="color:rgb(167,29,93);">=</span> <span class="pl-k" style="color:rgb(167,29,93);">new</span> <span class="pl-en" style="color:rgb(121,93,163);">XMLHttpRequest</span>();

<span class="pl-smi" style="color:rgb(51,51,51);">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179);">open</span>(<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">'</span>GET<span class="pl-pds">'</span></span>,<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">'</span>demo.php<span class="pl-pds">'</span></span>,<span class="pl-s" style="color:rgb(24,54,145);"><span class="pl-pds">'</span>true<span class="pl-pds">'</span></span>);

<span class="pl-smi" style="color:rgb(51,51,51);">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179);">send</span>()

<span class="pl-smi" style="color:rgb(51,51,51);">xmlHttp</span>.<span class="pl-en" style="color:rgb(121,93,163);">onreadystatechange</span> <span class="pl-k" style="color:rgb(167,29,93);">=</span> <span class="pl-k" style="color:rgb(167,29,93);">function</span>(){

    <span class="pl-k" style="color:rgb(167,29,93);">if</span>(<span class="pl-smi" style="color:rgb(51,51,51);">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179);">readyState</span> <span class="pl-k" style="color:rgb(167,29,93);">===</span> <span class="pl-c1" style="color:rgb(0,134,179);">4</span> <span class="pl-k" style="color:rgb(167,29,93);">&amp;</span> <span class="pl-smi" style="color:rgb(51,51,51);">xmlHttp</span>.<span class="pl-c1" style="color:rgb(0,134,179);">status</span> <span class="pl-k" style="color:rgb(167,29,93);">===</span> <span class="pl-c1" style="color:rgb(0,134,179);">200</span>){

    }

}</pre>


以下步骤，如果不能理解你死记硬背都要记下来，总比你答不出来要好吧！

1.创建Ajax核心对象XMLHttpRequest


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var xmlhttp;
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     if(
     
     window.XMLHttpRequest){ 
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //IE7+,Chrome,Firefox,Safari,Opera执行此代码 xmlhttp=new XMLHttpRequest;
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
     
     else{
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
       
     
     //IE5,IE6执行该代码
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        xmlhttp=
     
     new ActiveXObject(
     
     "Microsoft.XMLHTTP");
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
2. 向服务器发送请求 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.open(method,url,
     
     async);
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.send();
示例如下： 

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      xmlhttp.open(
     
     "GET",
     
     "http://www.runoob.com/try/ajax/demo_get.php",
     
     true);
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      xmlhttp.send();

注意一：open 的参数要牢记，很多面试官爱问这样的细节
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置，相对位置或绝对位置
  • async：true（异步）或 false（同步）

  • 为什么使用 Async=true ？

    我们的实例在 open() 的第三个参数中使用了 "true"。

    该参数规定请求是否异步处理。

    True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

    onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

    通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数


注意二：post请求不同于get请求

send(string)方法post请求时才使用字符串参数，否则不用带参数。

注意三：post请求一定要设置请求头的格式内容


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.open(
     
     "POST",
     
     "ajax_test.html",
     
     true);
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.setRequestHeader(
     
     "content-type",
     
     "application/x-www-form-urlencoded");
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.send(
     
     "fname=Herry&lname=Ford");

3.服务器响应处理

responseText    获得字符串形式的响应数据。

responseXML   获得XML 形式的响应数据。

3.1 同步处理


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.open(
     
     "GET",
     
     "http://www.runoob.com/try/ajax/demo_get.php",
     
     false);
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     xmlhttp.send();
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     document.getElementById(
     
     "mydiv").innerHTML=xmlhttp.responseText;
直接在send()后面处理返回来的数据。

3.2 异步处理

 异步处理相对比较麻烦，要在请求状态改变事件中处理。


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      xmlhttp.onreadystatechange=
     
     function () {
     
     //接收到服务端响应时触发
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     if(xmlhttp.readyState==
     
     4&&xmlhttp.status==
     
     200){
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     document.getElementById(
     
     "mydiv").innerHTML=xmlhttp.responseText;
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
            }
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      }

一共有5中请求状态，从0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：

200: "OK"

304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。

403   （禁止） 服务器拒绝请求。

404   （未找到） 服务器找不到请求的网页。

408  （请求超时） 服务器等候请求时发生超时。

500   （服务器内部错误）  服务器遇到错误，无法完成请求。






南音楼宇阁
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax发送请求(原生js和jq方式,扩展表单序列化)
weixin_68658847的博客
10-12 420
ajax发送请求(原生js和jq方式,扩展表单序列化)
ajax请求过程
热门推荐
初漾的博客
05-09 6万+
原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用jQuery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！ Ajax是什么 我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。 Ajax的使用 以下步骤，如果不能理解你死记硬背都要记下来，总
AJAX的请求操作
mantou_riji的博客
05-13 283
文章目录案例准备 案例准备 前端页面准备：GET.html <!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
JS原生AJAX
weixin_30270889的博客
03-30 117
ajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象；ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据； 下面简单封装一个函数，之后稍作解释 1 ajax({ 2 url: "./TestXHR.aspx", //请求地址 3 ...
ajax实例
abel004的专栏
11-26 393
本文主要是为了自己看的，没时间 去整理，可能博友们并不能看太明白，望见谅             $(function(){             $("#hidden").load(function(){                 var wnd = this.contentWindow;                 var str = $(w
Ajax在请求过程中显示进度的简单实现
10-23
ajax技术在web应用中使用非常频繁，本文以asp.net MVC为示例，提供一种简单的实现方式。ajax在请求过程中显示进度条，是怎么实现的呢？本文通过代码和文字说明相结合的方式分享给大家。
Ajax请求过程中显示“进度”的简单实现
04-22
在进行Ajax调用过程中一般都具有这样的做法：显示一个GIF图片动画表明后台正在工作，同时阻止用户操作本页面（比如Ajax请求通过某个按钮触发，用户不能频繁点击该按钮产生多个并发Ajax请求）；调用完成后，图片消失...
Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题
10-23
最近做了个项目，其中有项目需求是这样的，点击一个文件链接下载该文件，同时向后台发送请求，在开发过程中问题百出，小编把问题总结分享在脚本之家平台，供大家参考
实例详解Android Webview拦截ajax请求
08-28
Android Webview 拦截 Ajax 请求的详细讲解 Android Webview 提供了页面加载及资源请求的钩子，但是对于 H5 的 Ajax 请求并没有提供干涉的接口。这意味着我们不能在 Webview 中干涉 JavaScript 发起的 HTTP 请求，...
Java后台判断ajax请求及处理过程详解
08-19
但当用户已经登录并进行操作，若会话（Session）过期，再次触发一个AJAX请求时，直接跳转到登录页面会导致前端无法正确解析响应，因为AJAX请求期望的是JSON或其他数据格式，而非HTML页面。 二、解决方法： 为了解决...
前端给后台发请求的方式
Sibyl_zxl的博客
01-18 2079
1、fetch 2、xmlHttpRequest 3、html默认的form表单提交 三种方法发送的请求在调试network里面显示的type分别是fetch/xhr/document，证明方式不一样 据说type是指MIME类型，但是类型里并没有找到document，只有doc。存疑？ 111111 val requestInit = RequestInit( method...
Javascript之DOM(Document类型)
weixin_33705053的博客
06-07 116
JavaScript通过document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性。Document特征：nodetype的值为9 nodename的值为"#document" nodevalue的值为null parentnode的值为null ownerDocument的值为null...
文档对象模型DOM大全 整理(MDN)
furfur-jiang的博客
10-13 924
DOM概念数据类型Document属性Document 接口继承自 ParentNode 的接口HTMLDocument 的扩展整理编辑暂停于此DocumentOrShadowRoot 包含的属性Event handlersDeprecated propertiesMethodsExtension for HTML documentsMethods included from DocumentOrShadowRootEventsAnimation eventsClipboard eventsDrag &am
document.domain ajax,用document.domain完美解决Ajax跨子域 （转）
weixin_28729173的博客
08-06 283
利用Ajax跨域加载的内容是位于work.js8.in域名下的helloworld.txt。我们需要在主页面中设置document.domain为js8.in，然后主页面添加一个iframe，src为域名work.js8.in下的一个url，在iframe页面中同样设置document.domain为js8.in，同时iframe中需要添加Ajax的函数，例如引入jQuery.js。用docume...
ES2020新特性你了解吗？
前端小白的逆袭
12-08 492
ES2020新特性
【AJAX 学习笔记】多种方式发送AJAX请求（原生AJAX、jQuery、axios、fetch）
w的博客
08-14 1639
Ajax 学习笔记 1 AJAX相关概述 1.1 AJAX简介 AJAX 全称为Asynchronous JavaScript And XML ，就是异步的 JS 和 XML 。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2 XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。（而HTML是用来呈现数据）。 XML 和 HTML 类似，不同的
JS的Document类型
一心向晚
09-15 9334
Document HTMLDocument继承自Document。 在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用 1.属性 documentElement指向HTML页面中的<html>元素。 title 获取文档的标题 URL 获取URL domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。 referrer 取得链接到当前页面的那个页面的URL...
简单的ajax数据传输和获取例子
夏天的甲虫
04-15 4596
Untitled Document ajax提交信息************************************************* email address ajax获取的个人信息*********************************
如何理解ajax 请求处理的过程
最新发布
05-27
Ajax 请求处理的过程可以分为以下几个步骤： 1. 创建 XMLHttpRequest 对象：使用 JavaScript 创建 XMLHttpRequest 对象，该对象用于向服务器发送请求和获取响应数据。 2. 设置请求参数：通过 XMLHttpRequest 对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值