Ajax - 汇总

1,什么是ajax? 为什么要使用ajax?

　　1.ajax是"asynchornous javascript and xml "的缩写,指一种创建交互式网页应用的网页开发技术.

　　2.客户端与服务器,可以在不必刷新整个浏览器的情况下,与服务器进行异步通讯的技术.

　　特点： Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

2,ajax应用和传统web应用有什么不同?

1. 在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后get和post数据到服务器端。用户需要点击submit按钮来发送或者接收数据信息，然后等待服务器响应请求，页面重新加载。
2. 因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。
3. 使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互.
4. 通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

3.Ajax包含下列技术?

1. 基于web标准（standards-basedpresentation）XHTML+CSS的表示；
2. 使用 DOM（Document ObjectModel）进行动态显示及交互；
3. 使用 XML 和 XSLT 进行数据交换及相关操作；
4. 使用 XMLHttpRequest 进行异步数据查询、检索；
5. 使用 JavaScript 将所有的东西绑定在一起

4.AJAX都有哪些优点和缺点？

　　优点:

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

缺点:

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

6.请介绍一下XMLhttprequest对?

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

7.AJAX技术体系的组成部分有哪些?

　　HTML，css，dom，xml，xmlHttpRequest，javascript

8.AJAX请求总共有多少种CALLBACK?

1. onSuccess
2. onFailure
3. onUninitialized
4. onLoading
5. onLoaded
6. onInteractive
7. onComplete
8. onException

9.介绍一下XMLHttpRequest对象的常用方法和属性?

1. open(“method”,”URL”)建立对服务器的调用.第一个参数是HTTP请求 方式可以为GET，POST或任何服务器所支持的您想调用的方式。第二个参数是请求页面的URL。
2. send()方法:发送具体请求
3. abort()方法:停止当前请求
4. readyState属性:   请求的状态 有5个可取值:0=未初始化 ，1=正在加载,2=以加载，3=交互中，4=完成
5. responseText 属性: 服务器的响应，表示为一个串
6. reponseXML 属性: 服务器的响应，表示为XML
7. status 服务器的HTTP状态码: 200对应ok ,400对应not found

10.请解释一下 JavaScript 的同源策略。

　　同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

11.如何解决跨域问题?

　　因为ajax受同源策略的影响，地址不同，不能相互的去访问资源。协议，子域名，主域名，端口号，只要有一个不同就是跨域，资源就不能通过ajax进行访问。

3种方式 ：

1.代理服务器
　　 开发部门有两个，一个在北京，一个在上海 前端在北京，后台在上海
　　北京想去访问上海的某一张图片，自己搭一个服务器，把上海的代码拿过来

2.设置请求头 在服务端语言增加两行代码

3.JSONP

 12.简述ajax的过程

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

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

 

//get请求
// 1.创建xhr
            var xhr;
            if(window.XMLHttpRequest){    //常规，如果有，直接使用
                xhr = new XMLHttpRequest();
            }else{   //如果没有，老版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.绑定监听函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText)
                        if(xhr.responseText == 1){
                            ts.innerHTML = "该用户名已经被注册"
                        }else if(xhr.responseText == 0){
                            ts.innerHTML = "该用户名可以使用"
                        }

                    }
                }
            }
            // 3.建立连接
            xhr.open("GET","08.php?uname=" + username.value,true);
            // 正则验证
            // 4.发送请求
            xhr.send(null)

 

 

//post请求
// 1.
                var xhr;
                if(window.XMLHttpRequest){    //常规，如果有，直接使用
                    xhr = new XMLHttpRequest();
                }else{   //如果没有，老版本IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 2.
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if (xhr.status == 200) {
                            console.log(xhr.responseText);
                            p01.innerHTML = xhr.responseText;
                        }
                    }
                }
                // 3.
                xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);
                // 3.5  在发送post请求的时候，你得告诉服务器你发送的是一个什么
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // 4.发送
                xhr.send('strName=' + uname.value + '&strScore=' + score.value);

            }

 

13.GET和POST的区别，何时使用POST？　　

GET：一般用于信息获取，使用URL传递参数，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符。

POST：一般用于修改服务器上的资源，对所发送的信息没有限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

在以下情况中，请使用 POST 请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库

2. 向服务器发送大量数据（POST 没有数据量限制）

3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

14.解释jsonp的原理，以及为什么不是真正的ajax？

　　Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术。

15.http常见的状态码有那些？分别代表是什么意思？

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

16、一个页面从输入 URL到页面加载显示完成，这个过程中都发生了什么？　　

分为4个步骤：

1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

参考: https://www.cnblogs.com/1234wu/p/10439717.html