关于AJAX比较全面的一些问题

月亮很圆.

于 2020-07-23 15:41:51 发布

阅读量229

点赞数

分类专栏：知识点代码文章标签： ajax

本文链接：https://blog.csdn.net/L_Y_J_21/article/details/107537686

版权

知识点同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

代码

28 篇文章 0 订阅

订阅专栏

AJAX（Asynchronous JavaScript and XML）

1.什么是Ajax，为什么要使用Ajax

Ajax是“Asynchronous JavaScript and XML"的缩写，它是指一种创建交互式网页应用的网页开发技术
Ajax技术基于Javascript和HTTP Request
使用Ajax可以创建更好，更快，更用户界面友好的Web应用
Ajax包含下列技术：
基于web标准XHTML+CSS的表示
使用DOM进行动态显示及交互
使用XML和XSLT（样式转换标记语言）进行数据交换及相关操作
(扩展XSLT)根据 W3C 的 XSLT 标准，声明 XSL 样式表的正确方法是：

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

或者：

<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

使用XMLHttpRequest进行异步数据查询、检索
使用JavaScript将所有的东西绑定在一起

2.为什么要用Ajax

Ajax应用程序的优势在于：

通过异步模式提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了宽带占用
Ajax引擎在客户端运行承担了一部分本来由服务器承担的工作，从而减少了大用户量的服务器负载

3.Ajax最大的特点是什么

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

4.请介绍一下XMLHttpRequest对象

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

通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

Aajx开始流行始于Google在2005年使用的”Google Suggest”。

“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口：

当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。

XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

5.Ajax技术体系的组成部分有哪些

HTML、CSS、DOM、XML、XMLHttpRequest、JavaScript

6.Ajax应用和传统web应用有什么不同

在传统的JavaScript编程中，如果想要得到服务器数据库或文件上的信息，或者发送客户端到服务器，需要建立一个HTML form然后GET或者POST数据到服务器。用户需要点击submit按钮来发送或者接收数据信息，然后等待服务器响应请求，页面重新加载

因为服务器每次都会返回一个新的页面，所有传统的web应用有可能很慢且用户交互不友好

使用Ajax技术就可以使JavaScript通过XMLHttpRequest对象直接与服务器进行交互

通过HTTP Request一个web页面可以发送一个请求到web服务器并且接收web服务器返回的信息（不用重新加载页面），展示给用户的还是同一个页面，用户感觉页面刷新，也看不到JavaScript后台进行的发送请求和接收响应

7.Ajax请求总共有多少种callback（回调函数）

八种：onSuccess、onFailure、onUninitialized（未初始化）、onLoading（载入）、onLoaded（载入完成）、onInteractive（交互）、onComplete（完成）、onException

8.Ajax和JavaScript的区别

JavaScript是一种在浏览器执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术，它是利用了一系列相关的技术其中就包括JavaScript
JavaScript是由网景公司开发的一种脚本语言，它和sun公司的Java语言是没有任何关系的，它们相似的名称只是一种行销策略
在一般的web开发中，JavaScript是在浏览器端执行的，我们可以用JavaScript控制浏览器的行为和内容
在Ajax应用中信息是如何在浏览器和服务器之间传递的：通过XML数据或者字符串

9.在浏览器端如何得到服务器响应的XML数据

XMLHttpRequest对象的responseXML属性

10.XMLHttpRequest对象在IE和Firefox创建方式有没有不同

IE中通过new ActiveXObject()得到，Firefox中通过new XMLHttpRequest()得到

11.XMLHttpRequest对象的常用方法和属性

open(“method”,“url”)：建立对服务器的调用，参数一是HTTP请求方式可以为get,post或任何服务器所支持的您想调用的方式，参数二是请求页面的url

send()：发送具体请求

abort()：停止当前请求

readyState属性：请求的状态有五个 0未初始化 1正在加载 2已加载 3交互中 4完成

responseText属性：服务器的响应，表示为一个字符串

respondXML属性：服务器的响应，表示为XML

status：服务器的HTTP状态码，200对应OK 400对应NOT FOUND

12.什么是XML

XML是扩展标记语言，能够用一系列简单的标记描述数据

13.XML的解析方式

常用的用DOM解析解析和SAX解析
DOM解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优点是操作方便但是比较耗内存
SAX解析是按事件驱动的方式解析的，占用内存少但是编程复杂

14.DWR框架

DWR(DirectWeb Remoting)是一个WEB远程调用框架.利用这个框架可以让Ajax开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).

DWR的实现原理是通过反射，将java翻译成JavaScript，然后利用回调机制，从而实现了JavaScript调用Java代码

15、AJAX都有哪些优点和缺点？

优点：
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

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

16.封装Ajax

function $ajax({method = "get",url,data,success,error}) {

    //1.创建XMLHttpRequest对象
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (error) {
        //兼容IE
        xhr = new ActiveXObject("Microsoft.XMLHTPP");
    }

    //2.调用open方式规定请求类型,先判断数据是否存在
    if (data) {
        data = querystring(data);
    }
    if (method == "get" && data) {
        url += "?" + data;
    }
    xhr.open(method, url, true);

    //3.调用send方法，发送请求
    if (method == "get") {
        xhr.send();
    } else {
        //设置请求格式
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }

    //4.等待数据响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                if (success) {
                    success(xhr.responseText);
                }
            } else {
                if (error) {
                    error(xhr.status);
                }
            }
        }
    }

    function querystring(obj) {
        var str = "";
        for (var attr in obj) {
            str += attr + "=" + obj[attr] + "&";
        }
        return str.substring(0, str.length - 1);
    }
}

17.什么是JSON？

JSON是一种轻量级的数据交换格式。

18.Ajax有几种请求方式以及它们的优缺点

常用的post、ge、delete、put

get通过url传递参数
post要设置请求头，规定请求数据类型
post比get安全
(因为post参数在请求体中。get参数在url上面)
get传输速度比post快，根据传参决定的。
(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
post传输文件大理论没有限制 get传输文件小大概7-8k IE4k左右
get获取数据，post上传数据
（上传的数据比较多而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

19.什么情况会造成跨域

同源策略限制不同源会造成跨域。以下任意一种情况不同，都是不同源。
同源策略：1.同协议 2.同域名/IP 3.端口号全部相同（只要有一个不相同就是非同源策略）
Ajax只能下载同源的数据

20.跨域解决方案（JSONP跨域）

原理：动态创建一个script标签，利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：
1.先声明一个函数，这个函数有一个形参
2. 在需要下载数据的时候动态创建script标签，将script的src属性设置接口地址
3. 接口参数，必须带先前声明好的函数的函数名，要不然后台无法返回数据。
4. 通过定义函数名去接收后台返回数据

function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}
//创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据

21.CORS：跨域资源共享

原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

22.HTTP常见状态码

一. 2开头状态码

2xx (成功)表示成功处理了请求的状态代码
200 (成功) 服务器已成功处理了请求,通常。

二. 3开头状态码

3xx (重定向) 表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。
304 (未修改) 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

三.4开头状态码

4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理
400 (错误请求) 服务器不理解请求的语法。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。

四. 5开头状态码

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错
500 (服务器内部错误) 服务器遇到错误，无法完成请求

月亮很圆.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于AJAX比较全面的一些问题

AJAX（Asynchronous JavaScript and XML）1.什么是Ajax，为什么要使用AjaxAjax是“Asynchronous JavaScript and XML"的缩写，它是指一种创建交互式网页应用的网页开发技术Ajax技术基于Javascript和HTTP Request使用Ajax可以创建更好，更快，更用户界面友好的Web应用Ajax包含下列技术：基于web标准XHTML+CSS的表示使用DOM进行动态显示及交互使用XML和XSLT（样式转换标记语言）进行
复制链接

扫一扫

专栏目录