ajax总结

同步交互与异步交互：ajax核心思想：异步交互

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

什么是ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 提升用户的体验。

为什么使用ajax

1. 异步通信：使用JavaScript的XMLHttpRequest对象或现代的Fetch API与服务器进行异步数据交换，这意味着可以在不中断用户操作的情况下与服务器通信。

2. 局部页面更新：通过JavaScript操作DOM（文档对象模型），只更新页面的某一部分，而不是整个页面。

3. 数据格式：最初Ajax主要用于XML格式的数据交换，但随着技术的发展，现在更常用的是JSON格式，因为它更简洁，易于解析。

4. 分离关注点：将数据和表示层分离，使得前端和后端可以独立开发和优化。

5. 增强用户体验：通过异步加载数据和局部更新页面，可以减少等待时间，提供更流畅的用户体验。

6. 支持多种数据交互模式：Ajax可以支持GET和POST请求，以及其他HTTP方法，允许开发者根据需要选择最合适的交互方式。

7. 兼容性和跨浏览器支持：大多数现代浏览器都支持Ajax，使得Web应用程序可以在多种平台上运行。

8. 安全性和性能考虑：虽然Ajax提供了许多好处，但也需要考虑安全性问题，比如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。同时，过多的Ajax请求可能会影响服务器性能和页面加载时间。

AJAX常见应用情景

很多时候我们点击网站某个功能，比如注册功能，账号已经注册，密码位数太少，邮箱格式不对，就会局部刷新出一些提示：此账号已注册，密码不够安全，邮箱格式不对。然而局部刷新了一个部分，不是整个网页刷新。我当我们在百度中输入一个“白”字后，会马上出现一个下拉列表！列表中显示的是包含“白”字的关键字。 们就用到了Ajax技术。

• 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

• 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

AJAX核心（XMLHttpRequest）

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。

注意:

各个浏览器对XMLHttpRequest的支持也是不同的！

• 大多数浏览器都支持DOM2规范，都可以使用：var xmlHttp = new XMLHttpRequest()来创建对象；

• 但IE有所不同，

• IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")来创建对象；

• IE6中需要：var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)来创建对象；

• 而IE7以及更新版本也支持DOM2规范。

ajax和服务端交互的一个过程

1、创建XMLHttpRequest对象

2、建立连接

3、发送请求

4、通过回调函数接收服务端的响应数据

AJAX的优缺点

优点：

• AJAX使用Javascript技术向服务器发送异步请求；

• AJAX无须刷新整个页面；

• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

• AJAX并不适合所有场景，很多时候还是要使用同步交互；

• AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；

• 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

回调函数

回调函数是一种编程技术，它可以将一个函数作为参数传递给另一个函数，然后在另一个函数执行完毕后，再调用这个函数来处理结果。回调函数通常是通过函数指针来实现的，它可以用来实现异步操作或事件驱动的编程。回调函数的英文名是 callback，它是一种可执行的代码，可以被其他代码在特定的时机调用。

通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便.

 $.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性:

语法:

$.ajax([设置参数]);

常用设置参数如下:

参 数	说 明
String url	发送请求的地址,默认为当前页地址
String type	请求方式(POST或者GET,默认为GET)
Number timeout	设置请求超时时间
Object data 或 String data	发送到服务器的数据
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)	发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)	请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)	请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)	请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global	默认为true,表示是否触发全局的AJAX事件

 $.get()

$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:

 $.get(url,data,success(resp,status,xhr),dataType)

参数说明:

参 数	说 明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

把$.ajax()的ajax请求修改为$.get()

$.post()

$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法,语法如下:

$.post(url,data,success(resp,status,xhr),dataType);

参 数	说 明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

JSON 语法：

• 数据在名称/值对中

• 数据由逗号分隔

• 花括号保存对象

• 方括号保存数组

var person = {"name":"zhangSan", "age":"18", "sex":"male"};
alert(person.name + ", " + person.age + ", " + person.sex);

注意:

1. key要在双引号中,不能使用单引号

2. 字符串必须使用双引号表示，不能使用单引号

JSON值：

• 数字（整数或浮点数）

• 字符串（在双引号中）

• 逻辑值（true 或 false）

• 数组（在方括号中）

• 对象（在花括号中）

• null

Ajax使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
        //定义方法
        function  fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）

             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);

            //3.发送请求
            xmlhttp.send();

            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange=function()
            {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

总结

Ajax是一种Web技术，允许在不重新加载页面的情况下与服务器通信，实现动态内容更新，提高响应速度和用户体验。从而使得Web应用程序能够更加动态和交互性，提高了用户体验。