javascript和jquary的ajax請求

小編:啊南 10閱讀 2020.12.21

使用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的特點是:請求速度慢,安全性高,稍微復雜,數據量大,能上傳文件。

關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看