本文共 5346 字,大约阅读时间需要 17 分钟。
一: JQuery
Jquery: js的封装:
1: 选择器: 2: API方法: 3: 事件: 4: 案例: 【原有的js的案例,全部替换成jquery的形式】 5: 对ajax的封装:ajax: 异步请求提交:
同步请求:
同步请求: 客户端发出发出一个请求, 服务端, 接收请求, 在处理该请求时, 其他的请求只能进行等待, 当服务器端响应完毕, 整个页面全部刷新。 异步请求: 客户端可以同时发出多个请求, 多个请求, 都交给了xmh对象。 引擎然后发送给服务器端 服务器端响应完毕, 会对页面进行局部刷新。ajax 应用场景:
(1)用户名校验: (2)百度的搜索框。ajax 的开发步骤:
(1)获得ajax 对象: xmlHttpRequest : 不同的浏览器有差异. (2)打开和服务端的链接: open(“GET”,“url”,true); (3)发送数据: send(null); (4)获得响应: xhr.onreadystatechange= function(){ //获得服务端的响应数据: xhr.responseText; xhr.responseXML; xml数据: //数据的响应状态: 5个状态: 0: 创建完毕 1: open() 2: send(); 3: 获得响应头: 4: 响应完毕xhr.readyState;
//获得响应状态码: xhr.status; // 400 500 200
二: jquery 对ajax的封装:
$.ajax(); //ajax 复杂的形式, 能够处理get请求, 也能处理post请求。
语法:
$.ajax({ //封装提交的参数: type:“POST|GET” , // type:请求方式 url :“URL” , //ajax请求的地址: data:{ //请求参数(提交给后台的参数) // 将参数以?追加在url后边:" username=lisi&age=21 " username:“mrzhang”, age : 21, gender : “nan” }async: true, //默认为true, 异步请求。 false: 变成同步请求: cache: false, //默认为false, 页面不缓存结果dataType: "text", //服务端响应回来的数据类型: text: 字符串文本: xml: xml文档: json 对象success: function(data,textStatus, xhr){// 服务端响应成功, 自动回调该函数: //function当中含有三个参数, **三个参数都是可选择的。 常用的就是第一个: data: 返回来的数据: 默认情况返回的数据类型:** String: text xml json textStatues: success error : xhr: 返回引擎对象, xmlHttpRequest; xhr.responseText; }
});
说明: 这些参数都是可选择的, 没有指定, 将会采用默认值:
常用的参数: type : url : data: datatype: success :总结: get提交: 提交参数: username=lisi&age=321
post请求: 提交的参数: { username:“lisi”, age:21 };案例: 检查用户名是否可用:
前端页面的准备: 用户名: , 用户名称是否可用的提示信息:下面代码中的lable是h5 新属性。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>My JSP 'regist.jsp' starting page
处理后端的servlet:
(1)获得前端的提交的用户名: (2)调用service 层: 去数据当中进行查询: 返回一个结果: (3)约定: 返回true, 用户名可用: 返回false,用户名称不可用:package com.yidongxueyuan.web.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class RegistServlet2 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); /* * 1:获得参数: * 2: 判断用户存在: * 3:响应数据: */ String name = request.getParameter("username"); String username = name.trim(); /* * name: 如果是admin: 不让其注册: * 不是admin, 可以注册: */ String tip = "images/MsgSent.gif";//正确: if("admin".equals(username)){ tip="images/MsgError.gif"; response.getWriter().println(tip);//响应回去的是一个图片的路径: }else{ response.getWriter().println(tip); } }}
三: jquery封装了get提交:
$.get(url,[data],[ function(){}]);
案例:get方法发送时间到servlet:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>My JSP 'get.jsp' starting page
服务器端响应当前时间回去:
package com.yidongxueyuan.web.servlet;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class LoadTimeServlet extends HttpServlet { /* * 获得当前服务器的时间, 让后响应给客户端浏览器: * (non-Javadoc) * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse) */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String date = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(new Date()); response.getWriter().print(date); }}
四: jquery封装了post 提交:
$.post(url,[data], [function(){}]);用法同上!
五: load方法: (推荐) $("#links").load(url, [data], [function(){}]); 由jquery对象调用:特点;
(1)既能处理get 请求, 又能处理post请求: (2)当 load()没有参数提交, get 提交: 效率高: 当有参数提交的时候, post提交:前端:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>My JSP 'load.jsp' starting page
servlet:
package com.yidongxueyuan.web.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class LoadServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// doPost(request, response); System.out.println("get。。。。"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String name = request.getParameter("username"); System.out.println(name); }}
转载地址:http://xgmen.baihongyu.com/