精华内容
下载资源
问答
  • ajax原理和基础步骤面试怎么答 AJAX全称为“Asynchronous JavaScript and XML 而不是Asynchronous Java and XML ajax是写在jsp当中的,他是结合JavaScript和XML进行的, ”(异步JavaScript和XML),是一种...

    ajax原理和基础步骤面试怎么答

    AJAX全称为“Asynchronous JavaScript and XML而不是Asynchronous Java and XML

    ajax是写在jsp当中的,他是结合JavaScript和XML进行的,
    ”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。

    2.Ajax的工作原理
    Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
    3.Ajax的基本步骤
    实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

       创建XMLHttpRequest对象,也就是创建一个异步调用对象.
       
       创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    
       设置响应HTTP请求状态变化的函数.
    
       发送HTTP请求.
    
       获取异步调用返回的数据.
    
       使用JavaScript和DOM实现局部刷新.
    
    展开全文
  • Ajax原理及相关面试题总结 AJAX 是一种通过向服务器异步发送请求,获取数据,并在不需要重新刷新当前页面的情况下局部更新数据的web开发技术。 Ajax相当于是用户和服务器之间的中间层,它使得用户操作和服务器响应...

    Ajax原理及相关面试题总结

    AJAX 是一种通过向服务器异步发送请求,获取数据,并在不需要重新刷新当前页面的情况下局部更新数据的web开发技术。 Ajax相当于是用户和服务器之间的中间层,它使得用户操作和服务器响应异步化。不是所有用户请求都需要向服务器提交,某些数据验证和 数据处理都交由服务器自己完成的,只有在需要获取新数据时才会由Ajax引擎代为向服务器发送请求。Ajax原理简单的来说就是,利用XMLHttpRequest对象来向服务器发送异步请求,从服务器获取数据,在由JavaScript操作 Dom来更新页面。

    特点及优缺点

    最大的特点:Ajax可以实现动态不刷新(局部刷新),就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

    优势:

    1. 通过异步模式,提升了用户体验
    2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
    3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
    4. 不需要插件的⽀持,原⽣ js 就可以使⽤

    缺点:

    1. ajax不支持浏览器back按钮。
    2. 安全问题 AJAX暴露了与服务器交互的细节。
    3. 对搜索引擎的支持比较弱。
    4. 破坏了程序的异常机制。
    5. 不容易调试。

    Ajax过程

    1. //创建 XMLHttpRequest 对象,

      var ajax = new XMLHttpRequest();

    2. //规定请求的类型、URL 以及是否异步处理请求。

      ajax.open('GET',url,true);

    3. //发送信息至服务器时内容编码类型

      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    4. //发送请求

      ajax.send(null);

    5. //接受服务器响应数据

      ajax.onreadystatechange = function () {

      if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {

      }

      };

    GET,POST两种请求方式的区别

    代码上:

    1:get通过url传递参数

    2:post设置请求头 规定请求数据类型

    使用上:

    1:post比get安全

    (因为post参数在请求体中。get参数在url上面)

    2:get传输速度比post快 根据传参决定的。

    (post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)

    3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右

    4:get获取数据 post上传数据

    (上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

    XMLHttpRequest对象

    Ajax的核心是JavaScript对象XmlHttpRequest。该对象在IE5中首次引入,它是一种支持异步请求的技术。XmlHttpRequest使程序员可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

    属性:
    readyState:XHR对象的状态
    0:未初始化,对象已创建,但未调用open
    1:open方法已经调用,但send方法还未调用
    2:send方法已经调用,但还未接收数据
    3:正在接收数据,HTTP响应头已经接收数据,但未接收完成
    4:响应数据接收完成
    onreadyStatechange:
    请求状态改变的事件触发器(readyState改变时就会触发这个属性上的js函数)
    responseTEXT
    服务器响应的文本内容
    responseXML
    服务器响应的XML内容对应的Dom对象
    stauts
    服务器返回的http状态码:常见的有200:成功;404:未找到;500:表示服务器内部错误
    stautsTEXT
    服务器返回状态的文本信息

    方法:

    方法
    open
    指定和服务器间交互的方法,包含三个参数(提交方式,文件路径,异步传输)
    send
    向服务器发送请求,如果采用异步方式,就会立即返回。参数(content),content如果指定未null就表示不发送数据,其内容可以是dom对象也可以是输入流或字符串
    setRequestHeader
    设置http请求的指定头部的header的值为value。参数(header,value)该方法在open后调用,一般在post方式中使用
    abort
    停止http请求,会将XMLHttpRequest对象复位到未初始化的状态

    展开全文
  • Ajax原理:不刷新界面的一种请求。原理分为3步, 第一步:创建XMLHTTPRequest对象: let xmlhttp; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject(“Microsoft....

    Ajax:不刷新界面的一种请求。

    原理分为三步:

    第一步:创建XMLHTTPRequest对象

          let xmlhttp;
          if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
          }else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
    

    第二步:发送请求

          xmlhttp.open("GET",movieUrl,true);
          xmlhttp.send();
    

    第三步:服务器端响应

          xmlhttp.addEventListener("readystatechange",()=>{
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                let obj = JSON.parse(xmlhttp.responseText);
                console.log(obj);
                this.list=obj.subjects;
            }
          })
    
    展开全文
  • 面试官:Ajax 原理是什么?如何实现?

    千次阅读 多人点赞 2021-03-03 14:56:08
    一、是什么AJAX全称(Async Javascript and XML)即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,...

    一、是什么

    AJAX全称(Async Javascript and XML)

    即异步的JavaScriptXML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页

    Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面

    流程图如下:

    下面举个例子:

    领导想找小李汇报一下工作,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作

    Ajax请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于XMLHttpRequest对象,领导相当于浏览器,响应数据相当于小李

    浏览器可以发送HTTP请求后,接着做其他事情,等收到XHR返回来的数据再进行操作

    二、实现过程

    实现 Ajax异步交互需要服务器逻辑进行配合,需要完成以下步骤:

    • 创建 Ajax的核心对象 XMLHttpRequest对象

    • 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

    • 构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端

    • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态

    • 接受并处理服务端向客户端响应的数据结果

    • 将处理结果更新到 HTML页面中

    创建XMLHttpRequest对象

    通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

    const xhr = new XMLHttpRequest();
    

    与服务器建立连接

    通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接

    xhr.open(method, url, [async][, user][, password])
    

    参数说明:

    • method:表示当前的请求方式,常见的有GETPOST

    • url:服务端地址

    • async:布尔值,表示是否异步执行操作,默认为true

    • user: 可选的用户名用于认证用途;默认为`null

    • password: 可选的密码用于认证用途,默认为`null

    给服务端发送数据

    通过 XMLHttpRequest 对象的 send() 方法,将客户端页面的数据发送给服务端

    xhr.send([body])
    

    body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null

    如果使用GET请求发送数据的时候,需要注意如下:

    • 将请求数据添加到open()方法中的url地址中

    • 发送请求数据中的send()方法中参数设置为null

    绑定onreadystatechange事件

    onreadystatechange 事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState ,

    关于XMLHttpRequest.readyState属性有五个状态,如下图显示

    只要 readyState属性值一变化,就会触发一次 readystatechange 事件

    XMLHttpRequest.responseText属性用于接收服务器端的响应结果

    举个例子:

    const request = new XMLHttpRequest()
    request.onreadystatechange = function(e){
        if(request.readyState === 4){ // 整个请求过程完毕
            if(request.status >= 200 && request.status <= 300){
                console.log(request.responseText) // 服务端返回的结果
            }else if(request.status >=400){
                console.log("错误信息:" + request.status)
            }
        }
    }
    request.open('POST','http://xxxx')
    request.send()
    

    三、封装

    通过上面对XMLHttpRequest对象的了解,下面来封装一个简单的ajax请求

    //封装一个ajax请求
    function ajax(options) {
        //创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest()
    
    
        //初始化参数的内容
        options = options || {}
        options.type = (options.type || 'GET').toUpperCase()
        options.dataType = options.dataType || 'json'
        const params = options.data
    
        //发送请求
        if (options.type === 'GET') {
            xhr.open('GET', options.url + '?' + params, true)
            xhr.send(null)
        } else if (options.type === 'POST') {
            xhr.open('POST', options.url, true)
            xhr.send(params)
    
        //接收请求
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let status = xhr.status
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML)
                } else {
                    options.fail && options.fail(status)
                }
            }
        }
    }
    

    使用方式如下

    ajax({
        type: 'post',
        dataType: 'json',
        data: {},
        url: 'https://xxxx',
        success: function(text,xml){//请求成功后的回调函数
            console.log(text)
        },
        fail: function(status){请求失败后的回调函数
            console.log(status)
        }
    })

    --The End--

    面试官JavaScript系列正在更新:16/33

    篇副有限,扫下方二维码查看往期

    展开全文
  • Ajax原理: 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。 Ajax实现过程: 1.新建 一个 XmlHttpRequest 实例化对象; const xhr = new ...
  • Ajax运行原理
  • aJAX 原理

    2011-12-02 18:14:35
    最近去面试面试官问ajax原理,偶只知道大概的意思,并不能搞清楚ajax的工作原理,所以赶紧补充一下知识。 AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的...
  • 1. ajax 原理:  通过 XMLHttpRequest对象向服务器 发送异步请求,从服务器 拿到数据,  然后 通过 js 来操作 dom而更新页面    2. xml 的解析:   dom解析, 先把 xml文件 全部加载 在内存中, 占用内存比较...
  • Ajax系列面试题总结

    万次阅读 多人点赞 2017-05-28 16:07:07
    1、Ajax是什么?如何创建一个Ajax? 答案:Ajax 全称是 asychronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步交互,实现页面的局部刷新。 基本步骤 4 步走:(创建对象、...
  • AJAX常见面试问题

    万次阅读 多人点赞 2018-02-11 16:02:18
     那你能说说封装好的 ajax里的几个参数吗 ?url: 发送请求的地址。type: 请求方式(post或get)默认为get。async: 同步异步请求,默认true所有请求均为异步请求。timeout : 超时时间设置,单位毫秒data:要求为...
  • 面试题】Ajax原理和优缺点总结

    千次阅读 2018-01-04 08:47:39
    面试题】Ajax原理和优缺点总结Ajax原理 Ajax原理简单来说就是通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作dom从而更新页面。这其中最关键的一步就是从服务器...
  • Ajax原理的了解

    2020-02-26 15:21:48
    Ajax原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中...
  • 面试题 —— Ajax的基本原理总结

    万次阅读 多人点赞 2018-08-13 11:11:47
    前两天面试的时候,面试官问我,你掌握的技能是Ajax,那你给我讲一下它的基本原理吧! 妈呀,瞬间脑子空白。当时在门口背了好久的网络知识点,一时竟然说不吃话,只记得什么异步通信,同步数据,面试官的笑让我...
  • 开发中必不可少的异常刷新技术,ajax其中之一,简单方便高效。这次就说说ajax所有知识点,包括面试中的ajax问题
  • Ajax常见面试

    2017-02-12 19:56:44
    AJAX应用和传统Web应用有什么不同? 在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”...
  • ajax常见面试

    2020-03-11 17:10:57
    1:什么是ajaxajax作用是什么? 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互 2:原生js ajax请求有几个步骤?分别是什么 //创建 XMLHttpRequest 对象 var ajax = new ...
  • AJAX面试

    千次阅读 2018-03-30 12:36:47
    Ajax 是什么? 如何创建一个AjaxAjax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器...
  • AJAX常见面试

    2020-01-07 22:00:59
    1:什么是ajaxajax作用是什么? • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 是一种用于创建快速动态网页的技术 • AJAX可以在不刷新整个浏览器页面的情况下,通过与服务器进行...
  • 关于AJAX面试

    千次阅读 2017-12-07 15:33:20
    关于AJAX面试
  • 前两天面试的时候,面试官问我,你掌握的技能是Ajax,那你给我讲一下它的基本原理吧! 妈呀,瞬间脑子空白。当时在门口背了好久的网络知识点,一时竟然说不吃话,只记得什么异步通信,同步数据,面试官的笑让我...
  • ajax常见面试问题

    千次阅读 2019-03-23 11:58:46
    那你能说说封装好的 ajax里的几个参数吗 ? url: 发送请求的地址。 type: 请求方式(post或get)默认为get。 async: 同步异步请求,默认true所有请求均为异步请求。 timeout : 超时时间设置,单位毫秒 data:要求为...
  • AJAX笔试面试题汇总

    2014-04-08 20:36:21
    AJAX笔试面试题汇总 1. 什么是ajax,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajaxAJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。 Ajax...
  • ajax面试

    千次阅读 2017-05-06 08:21:11
    什么是ajaxAJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。 Ajax包含下列技术: 基于web标准(standards-basedpresentation)XHTML+CSS的表示; 使用 DOM...
  • 一张图搞懂Ajax原理

    千次阅读 2019-05-19 15:05:50
    原理 说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起是最好的切入...您只需要看懂这张图ajax原理,您就算通关了;并且很难忘记。 首先let xhr = n...
  • Ajax面试

    2017-08-28 14:44:59
    不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题。Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员的欢迎。大多数待遇丰厚的Java开发职位都要求开发者精通多线程技术并且有...
  • ajax 面试

    2019-10-21 17:01:37
    1、什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajaxAJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。 Ajax包含下列技术: 基于web标准...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,442
精华内容 8,576
关键字:

ajax原理面试