前端技术--Ajax

Posted 2021-04-15 前端留学生

Ajax

1.传统请求和异步请求

• 特点：请求之后，刷新整张页面

• 缺点：由于刷新了整张页面，用户操作被中断，造成大量网络流量的极大浪费

• 异步请求：基于ajax发起的请求都是异步请求

• 特点：多个请求并行发生，请求之间互不影响，请求之后页面不动，刷新页面局部

2.什么是Ajax

Ajax即"Asynchronous javascript And XML"（异步JavaScript和XML）。他不是一种新的编程语言，而是一种通过异步实现网页的局部刷新技术

3.Ajax的核心对

XMLHttpRequest对象是一个javascript对象，存在着浏览器差异。简称xhr对象

4.Ajax的编程思路

1.创建xhr核心对象 var xhr; //目前为止：浏览器内核webkit | ie系edge（微软）edge wbkit //window.XMLHttpRequest ===> true|webkit false|ie系内核 if(window.XMLHttpRequest){ //是webkit xhr = new XMLHttpRequest(); }else{//是ie系内核 xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
2.发送请求，并传递参数 xhr.open("GET", "url?username=shangsan"); //设置请求方式和请求路径 xhr.send(null);
3.处理响应，并更新页面局部 //xhr.readyState 0|xhr没有初始化 1|xhr创建 2|发送请求 3|响应回来，不完整 4|完整响应 //xhr.status 404|路径找不到 500|程序出错 405|service方法名出错 200|正确响应 xhr.onreadystatechange = function(){  if(xhr.readyState == 4 && xhr.status == 200){//处理完整且正确的响应 console.log(xhr.responseText); //xhr.responseText ===> "ok" //之后进行页面更新操作 js操作 jquery操作 }    }                                  

xxxAction private String username; set/get 省略 public String xxx(){ //1.收集数据 //2.调用业务对象 //3.响应结果 response = ServletActionContext.getResponse(); response.getWriter().print("ok"); return null; }

注意：ajax发起的请求action中对应方法一定不能有返回值

action在响应结果时，ajax只认字符串，不认其他操作，所以只能通过流

---

5.提交方式POST和GET区别

区别

• post是向服务器传送数据；get是从服务器上获取数据。

• 在客户端，get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

• 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

  例如：get 提交Request.QueryString["aa"].ToString();

  post 提交用 Request.Form["aa"].ToString();

• get可以传送的数据量则非常小，只能有1024字节，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

使用建议

• get方式的安全性较post方式要差些，但是执行效率却比post方法好。

  如果这些数据是中文数据而且是非敏感数据，那么使用 get；如果用户输入的数据不是中文字符而且包含敏感数据，包含机密信息的话，建议用post数据提交方式为好；

• 在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式；

总结：（简答）

• 使用post提交的页面在点击【刷新】按钮的时候浏览器一般会提示“是否重新提交”，而get则不会；

• 用get的页面可以被搜索引擎抓取，而用post的则不可以；

• 用post可以进行文件的提交，而用get则不可以。

6.发送GET方式请求

$(function(){ //1.创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.发送请求，并传递参数 xhr.open("GET", "url/test?name=zhangsan"); xhr.send(); //3.处理响应 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ console.log(xhr.responseText); } }});

注意：上述操作需引入JQuery依赖（导入JQuery包）且在js中填写

---

7.发送POST方式请求

//常规的POST请求都是由form表单来做的<form method="post" action="..." enctype=""> // enctype一般不写, 有下面两种数据可以填写 // application/x-www-form-urlencoded 默认 给表单数据进行编码 // multipart/form-data 用来对表单中二进制类型进行编码（用于文件上传，不是默认值是由于效率问题） 用户名 <input type="text" name="name"/> 提交</form>

使用ajax进行post方法

1.创建xhrvar xhr;if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject("Microsoft.XMLHTTP");}2.发送请求，并传递参数xhr.open("POST", "url");//模拟表单传递参数xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send("name=zhangsan&password=123");3.处理响应，并更新页面局部xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ xhr.responseText; //返回字符串 }}

8.Ajax的数据交换机制

JSON (JavaScript Object Notation, JS对象标记) 是一种轻量级的数据交换格式

1.如果服务端响应的不再是字符串而是对象或者是集合类型时，无法直接将对象响应给客户端 如：User、List<User>、Map<String, User> 需要将对象转为JSON格式字符串响应给ajax 2.如何将对象转为json格式的字符串 User user = new User("21", "chenyu", 23, 123, 0); String userJson = JSONObject.toJSONString(user); //阿里巴巴的fastjson json response.setContentType("application/json;charset=UTF-8"); PrintWriter writer = response.getWriter(); writer.out(userJson);
3.前端的ajax函数中应该如何处理json格式的字符串 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ var json = xhr.responseText;//json var userObj = eval("("+xhr.responseText+")"); //转为js对象 console.log(userObj.id); console.log(userObj.name); } }
4.处理json字符串中的日期格式问题 var userJson = JSONObject.toJsonStringWithDateFormat(user, "yyyy-MM-dd");

9.jQuery对Ajax的封装

现有ajax请求存在的问题：

• 每次发起ajax请求，需要写大量重复性代码，极大影响我们开发效率

• 由于大量的重复性代码，导致日后代码维护难度加大

封装ajax思想，可以写一个js，例如:ajax.js，定义get和post方法，方便页面的js使用

//用来发起get方法请求的函数function get(url, param, aa){//aa是回调函数 //创建xhr var xhr; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //发送请求并传递参数 url = param?url+"?"+param:url; xhr.open("GET", url); xhr.send(); //处理响应，并更新页面 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ aa(xhr.responseText); } }}//用来发起post方法请求的函数function post(url, param, aa){//aa是回调函数 //创建xhr var xhr; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //发送请求并传递参数 xhr.open("POST", url); xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(param); //处理响应，并更新页面 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ aa(xhr.responseText); } }}

回调函数：给js中传了一个函数，然后在js文件中完成了函数的调用

jQuery对ajax的封装
1.使用jQuery对象对ajax封装 a.在对应页面中引入jquery相关的js文件 <script src=".../js/jQuery-min-xx.js"></script> b.如何使用jQuery封装ajax （百度搜索jquery api） 1) $.ajax(); //通用的、可配置的ajax请求 发送GET|POST请求 可配置... //$ === jQuery 等价 $.ajax({ type: "GET|POST", url: "请求后台路径"， data: {}|"", //{username:"zhangsan", age:23}|"username=zhangsan&age=23" success: function(result){ result;//就是当前返回的响应结果 //如果请求的url对应返回的是一个json格式数据，jQuery自动将json转为相应js对象 //如果请求的url对应返回的是一个普通格式字符串，jQuery返回的就是字符串本身 } }); 2) $.get(); //只能发起GET方式的ajax请求，返回json|字符串 $.get(url,[data],[callback],[datatype])  url: 请求路径 data: 请求参数，可有可无 callback: 响应回来回调函数，可有可无 function(result){result} dataType: 定义服务器返回格式 "JSON" = application/json 3) $.getJSON(); //只能发起GET方式的ajax请求，要求返回数据必须是json格式数据 $.getJSON(url,[data],[callback]) url: 请求路径 data: 请求参数，可有可无 callback: 响应回来回调函数，可有可无 function(result){result} 4) $.post(); //只能发起POST方式的ajax请求，返回json|字符串 $.post(url,[data],[callback],[datatype]) url: 请求路径 data: 请求参数，可有可无 callback: 响应回来回调函数，可有可无 function(result){result} dataType: 定义服务器返回格式 "JSON" = application/json

例：1.jQuery提供了一个全局函数 $.ajax({ type: "POST|GET", url: "", data: "name=张三|{key:value}", dataType:"JSON", success:function(result){ console.log(result); } })2.发送GET方式的异步请求 $.get(url, data, function(result){},'JSON');3.发送POST方式的异步请求 $.post(url,data, function(result){},'JSON')

扫描下方二维码

获取web前端、学习资料视频

1.传统请求和异步请求

• 特点：请求之后，刷新整张页面

• 缺点：由于刷新了整张页面，用户操作被中断，造成大量网络流量的极大浪费

• 异步请求：基于ajax发起的请求都是异步请求

• 特点：多个请求并行发生，请求之间互不影响，请求之后页面不动，刷新页面局部