Ajax的特性以及用法

一、什么是Ajax

1、jQuery的Ajax

①：get方法​编辑

 ②：post方法

 ③：Ajax（这个重要，jQuery的ajax最常用）

PS：一定要注意，数据类型是 json ！！！

2、JavaScript的Ajax（原生Ajax，可以了解一下，看情况使用吧）

二、Ajax的特性

三：基于ajax的交互方式：

---

一、什么是Ajax

异步的JavaScript and xml；前端可以异步请求，在页面局部刷新

1.XMLHttpRequest

浏览器能够发送异步请求 全是依赖该对象的属性和方法(原生的ajax了解即可)

2.异步请求，局部刷新

3.

1、jQuery的Ajax

①：get方法

 ②：post方法

 ③：Ajax（这个重要，jQuery的ajax最常用）

$.ajax({
    url:"请求url?param1=v1",            //url   ajax请求的目标服务器地址
    type:"get|post",                   //type  指定请求方式（get|post）
    data:,                            // 提交的数据
    dataType:"json",             //预期返回的是json对象格式的数据
    success:function(backData){ //success  ajax请求成功之后执行的回调函数，参数backData就是服务器返回的数据
        
    },
    error:function(e){    //error   ajax请求出现错误执行的回调函数，参数e表示异常信息对象
        
    }
});

PS：一定要注意，数据类型是 json ！！！

2、JavaScript的Ajax（原生Ajax，可以了解一下，看情况使用吧）

1）发送get请求

 ajax方式get请求

2）创建AJAX异步对象

 //1. 创建 XMLHttpRequest 对象
            var xmlHttp;
            if(window.XMLHttpRequest){
                //存在浏览器差异  有的浏览器直接支持这个对象  直接 new 就可以了
                xmlHttp = new XMLHttpRequest();
            }else {
                //有的浏览器不支持
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

3）指定回调函数 监听请求的执行结果

//2.指定回调函数  监听请求的执行结果
            xmlHttp.onreadystatechange = function (){
                // readyState=4 表示读取响应结束
                // status 表示 后端响应正常
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    // 在这里 接受响应结果
                    var result = xmlHttp.responseText;
​
                    alert(result);
​
                    document.getElementById("name2").value = result;
                }
            }
 

4）与服务端建立链接

open(method,url,async)

method表示提交方式：get/post

url表示访问的资源

async 表示是否异步

 //3. 与服务端建立链接
  xmlHttp.open("get","/getAjax1Name?name=zs",true);
 

5）发送请求

//4. 发送请求
  xmlHttp.send();

二、Ajax的特性

1 异步式数据交互：Ajax可以异步地向服务器发送请求并处理响应，无需刷新整个页面。这样可以提高应用程序的响应速度，提供更加流畅的用户体验。 2 较少的网络传输：由于Ajax只发送更新数据而不是整个页面，它可以大大减少网络流量，从而提高应用程序性能。 3 实时响应：使用Ajax可以使应用程序实时响应用户的操作，并不需要用户提交表单或者重新加载页面才能更新内容。 4 增量式开发：Ajax允许应用程序针对功能进行增量式开发 。这意味着开发人员可以一步一步地扩展应用程序的功能，而不是等待所有功能的开发和测试。 5 增强的交互性：Ajax可以增强用户和应用程序之间的交互性。它使站点可以更好地响应用户操作和请求，实现更好的用户体验。 6 支持多种数据格式：Ajax支持多种数据格式（如XML、JSON等），可以充分满足数据传输的不同需求。 7 跨平台、跨浏览器兼容性：由于Ajax是基于Web标准（如JavaScript、DOM、XML等）的技术，可以在几乎所有现代浏览器上运行，以及跨多种平台。

三：基于ajax的交互方式：

1. 前端发送请求的方式 ：在js中发送ajax请求，当前用的是基于jQuery封装的方法，注意 请求地址 携带的参数，以及收到后端响应数据的写法，特别是要看懂后端响应的数据格式

2. 后端接收请求参数：当前还是基于request接收，到了springmvc区别就大了

3. 响应数据到前端 ：直接用过response对象，得到一个打印流，向浏览器直接输出json格式的数据，需要把java类型转为json格式

 可以用Jackson或者fastjson