前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript和jquary的ajax请求

javascript和jquary的ajax请求

作者头像
微醺
发布2019-01-17 11:13:47
9070
发布2019-01-17 11:13:47
举报

使用js的ajax请求

ajax全称 Asynchronous JavaScript and XML(异步的JavaScript和XML)。不是一门新技术,是html,css,js,或jq,dom操作的综合运用。 ajax具有异步请求,局部刷新(不是整个网页刷新,只刷新网页某些区域)的特点。 通过ajax局部刷新数据

  //1.创建xmlhttprequest对象,获取当前requst请求
	 var req=new XMLHttpRequest();
   //2.构建url,是用get请求 ,第一个参数是get/post方式的请求,第二个参数是:服务端地址
     //第三个参数:是否是异步请求
  	req.open("get","quaryProduct.do?page="+currentPage+"&order="+order+"&pname="+pname+"
   &type="+type,true);
   //3.发送请求
	 req.send();
   //4.创建相应事件,当readystate的状态发生改变时,触发事件,监听响应回来的数据	 
     req.onreadystatechange=function(){
    	if(req.readyState==4&&req.status==200){
    		
    	    //服务器返回的是json数据 解析json
    		var data=req.responseText;
    		var obj = eval(data);
    		//下面就可以对数据进行操作了,比如显示在页面
    		}

这里面我们使用servlet接收前端传过来的数据。

@WebServlet("/productQuery.do")
public class QueryProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		  String page = req.getParameter("page");
		  String order = req.getParameter("order");
		  String pname = req.getParameter("pname");
		 // System.out.println(pname);
		  String type = req.getParameter("type");
		  if(order.equals("1")){
	    		 order="ASC";
	    	  }else{
	    		  order="DESC";
	    	  }
		  int p = Integer.parseInt(page);
		 // System.out.println(page);
		//处理数据,从数据库中查询数据
			 List<Product> list = new ProductImp().search(pname,type,order,(p-1)*5,5);
			//将list转换成String  json
			 String jstr = JSON.toJSONString(list);
			 //响应前端
			 resp.getWriter().write(jstr);
	}  
}

使用jq的ajax请求

  $.post("quaryProduct.do",{"page":currentPage},function(data){
       //后面括号里面定义了数据返回的形式,这面直接写对数据的操作
    },"json");

继续传上面的servlet。

总结

经过比较你会发现使用jquary简单很多。这里的post和get都可以传递数据,不过 get的特点是:请求速度快,安全性低,使用简单,数据量小,不能上传文件。 而post的特点是:请求速度慢,安全性高,稍微复杂,数据量大,能上传文件。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年11月13日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用js的ajax请求
  • 使用jq的ajax请求
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档