网站导航
> 文章列表 > Ajax的特性以及用法

Ajax的特性以及用法

网友: 文章列表 2024-03-21 23:23:41

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请求

<input type="text" id="name2" > <a href="javascript:getName()">ajax方式get请求</a>

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/posturl表示访问的资源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

网络标签：

相关问题