前端ajax数据提交到服务器_前端技术Ajax

Ajax

1.传统请求和异步请求

• 传统请求：基于超级链接  地址栏form表单 地址栏location.href发起的请求全部是传统请求

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

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

• 异步请求：基于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中可以看到。

  post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的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。

• 安全性问题。正如在(1)中提到，使用 get 的时候，参数会显示在浏览器地址栏上，而 post 不会。

使用建议

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

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

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

总结：(简答)

• get的参数会显示在浏览器地址栏中，而post的参数不会显示在浏览器地址栏中；

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

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

• 用post可以提交的数据量非常大，而用get可以提交的数据量则非常小(2k)，受限于网页地址的长度。

• 用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中填写

GET方式是地址栏传参

---

7.发送POST方式请求

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