Zookeeper 拓展培训公司 spring razor ssh threejs xsd Semantic UI 百度seo关键词优化 八大员 vue官方下载 vue绑定点击事件 bootstrap后台模板 react脚手架搭建 web前端开发实战项目 大数据驾驶舱 安卓小程序源码 bootstrap文件上传样式 oracle数据库版本 mysql修改字段值 coreldraw入门学习 mysql建表主键自增长 mysql插入 python迭代器 python环境配置 python异常 java接口的使用 java实现多线程 java写入txt java开发语言 linux教程 脚本软件 影视后期软件 苹果剪辑 php取整函数 程序员面试宝典 bbm注册 魔兽七个人 联发科mt6750 linux定时任务
当前位置: 首页 > 学习教程  > 编程语言

第十九天前端jsp Ajax

2020/11/4 14:27:45 文章标签:

二十三Ajax 1.特点 局部刷新 异步传输 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02CoeA2j-1604470936651)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464193782.png)] 2优点 节省带宽 减轻服务器压力 加快相应速度 …

二十三Ajax

1.特点

局部刷新

异步传输

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02CoeA2j-1604470936651)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464193782.png)]

2优点

节省带宽

减轻服务器压力

加快相应速度

3.实现步骤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K5Po4kqi-1604470936654)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464187451.png)]

1.创建XMLHttpRequest对象

xmlHttpRequest = new XMLHttpRequest();

2.与服务端获得连接

xmlHttpRequest.open(method,URL,async)

建立与服务器的连接,method参数指定请求的http方法,典型的值是GET(超链接等)/POST(表单),URL

参数指定请求的地址,async参数指定是否使用异步请求,其值为true/false

例:xmlHttpRequest.open(“get”,“userServlet?name=”+name,true);

3.向服务器发送请求信息

send(content)
发送请求,content参数指定请求的参数
例:xmlHttpRequest.send(“a=10”); //以get方式提交时,请求信息是不能到达服务器端的。

4.指定回调函数接收响应信息

xmlHttpRequest.onreadystatechange=reback;

5.创建回调函数,根据响应状态动态刷新页面

xmlHttpRequest.readystate XMLHttpRequest的状态信息

​ 0 XMLHttpRequest对象没有完成初始化

​ 1 XMLHttpRequest对象开始发送请求

​ 2 XMLHttpRequest对象的请求发送完成

​ 3 XMLHttpRequest对象开始读取响应,还没有结束

​ 4 XMLHttpRequest对象读取响应结束

xmlHttpRequest.status HTTP的状态码

​ 200 服务器响应则正常

​ 400 无法找到请求资源

​ 403 没有访问权限

​ 404 访问的资源不存在

​ 500 服务器内部错误

xmlHttpRequest.responseText 获得响应的文本内容

xmlHttpRequest.responseXML 获得响应的XML文档对象

例:

function reback(){
var span1=document.getElementById(“sp”);//找到span元素
if (xmlhttp.readyState == 4){//服务端响应结束
if (xmlhttp.status == 200) {//服务端响应成功
var res=xmlhttp.responseText;//responseText表示请求完成后,返回的字符串信息
if(res!= null){
span1.innerHTML=res;
} else{
span1.innerHTML=“接收到的响应信息为空!”;}
}
}
}

1jspAjax.jsp

<script type="text/javascript">
//1.创建XMLHttpRequest对象
var xmlHttpRequest;
function doAjax(){
	xmlHttpRequest =  new XMLHttpRequest();
}
//2.定义一个函数
function checkName(){
	var name=document.getElementById("um").value;
	//1.创建XMLHttpRequest对象
	doAjax();
	//2.与服务器取得连接
	xmlHttpRequest.open("get","userServlet?name="+name,true);
	//3.向服务端发送请求信息
	xmlHttpRequest.send("a=10");//以get方式请求提交,请求信息不能到达服务端
	//4.通过回调函数接收响应信息
	xmlHttpRequest.onreadystatechange=reback;
}
//3.回调函数
function reback(){
	alert("xmlHttpRequest.readyState:"+xmlHttpRequest.readyState+"\txmlHttpRequest.status:"+xmlHttpRequest.status)
	var span=document.getElementById("sp");//找到span元素
	//匿名函数
	if(xmlHttpRequest.readyState==4){//服务器响应结束
		if(xmlHttpRequest.status==200){//服务器响应成功
			var res=xmlHttpRequest.responseText;
            //var res1=eval("("+res+")");//对JSON格式的数据解析
            //json是一种文本字符串,被存储在responseText属性中
            //js需要使用eval语句将responseText转化为Json格式
			if(res!=null){
				span.innerHTML=res;
			}else{
				span.innerHTML="接收到的响应信息为空";
			}	
		}
	}
}
</script>
<body>
<h2>用户注册</h2>
<form action= "" method= "post" >
用户名: <input type= "text" id= "um" onBlur="checkName()" name= "uname" /><span
id= "sp" ></span><br/>
密码: <input type= "password" name= "upass1" /><br/>
确认密码: <input type= "password" name= "upass2" /><br/>
Email: <input type= "text" name= "uemail" /><br/>
</form>
</body>	
web.xml
	<!-- 配置ajax的servlet -->
	<servlet>
		<servlet-name>jspAjaxServlet</servlet-name>
		<servlet-class>S1103Ajax.S1JspAjaxServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>jspAjaxServlet</servlet-name>
		<url-pattern>/1103Ajax/userServlet</url-pattern>
	</servlet-mapping>
S1103Ajax.S1JspAjaxServlet.java

public class S1JspAjaxServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        //若响应的数据格式为 XML 文档格式,则必须设置以下信息
		//resp.setContentType("text/xml;charset=UTF-8");
		System.out.println("进入jspajaxservlet");
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		String name=request.getParameter("name");
		String a=request.getParameter("a");
		String username=new String(name.getBytes());
		System.out.println("username:"+username);
		if("li".equals(username)){
			PrintWriter out=response.getWriter();//输出流
			out.write("该用户存在");
			out.close();
		}else{
			PrintWriter out=response.getWriter();//输出流
			out.write("该用户不存在"+username+"可注册");
			out.close();
			out.close();
		}
	}
}

4.JSON数据格式

JavaScript Object Notation java对象标记

JavaScript原生格式,一种轻量级的数据交换格式

1.JS数据格式

对象是一个无序的“键/值”的集合,一个对象以"{"(左括号)开始}(右括号)结束,每个名称后面跟:(冒号),名称/值对之间使用,(逗号)分割

  1. json对象用{}(大括号)表示 {名称 1:值 1,名称 2:值 2}

  2. json数组用[](中括号)表示 [值1,值2,值3,值4]

  3. 映射用:(冒号)表示 名称:值

  4. 并列数据之间用,(逗号)分割 名称1:值1,名称2:值2

<script type="text/javascript">
//1.定义JSON对象
var person={
		"name":"李四",
		"sex":"男",
		"age":22,
		address:"江西南昌"
}
document.write(person.name+"<br/>");
//2.定义JSON数组
var	arr=["lisi","zhangsan","wangwu"];
document.write(arr[1]+"<br/>");
var persons=[{"name":"李四","sex":"男","age":23,"address":"江西南昌"},
             {"name":"李逵","sex":"男","age":34,"address":"梁山"}
             ];
document.write(persons[1].name+"<br/>");
//3.JSON对象数组嵌套
var objArr={"阿凡达":"左雪昌","特点":"吊毛","特性":["迭代","上下车",{"速度快":{"少读":"少读5分钟"}}]};
document.write(objArr.特性[2].速度快.少读);
</script>
2.Json数据嵌套

json数据格式中,key只能为字符串类型,而value可以是基本数据类型,也可以为Json数组或Json对象(则嵌套对value进行)

<script type="text/javascript">
//3.JSON对象数组嵌套
var objArr={"阿凡达":"左雪昌","特点":"吊毛","特性":["迭代","上下车",{"速度快":{"少读":"少读5分钟"}}]};
document.write(objArr.特性[2].速度快.少读+"<br/>");

var all=[{
		"name":"李连杰",
		"sex":"男",
		"address":[
		{"one":"江西南昌市红谷滩新区23号"},
		{"two":"江西抚州赣东大道213号"}]
		},
		{
		"name":"吊毛"	
		}
		]
document.write(all[0].address[1].two);
</script>

json是一种文本字符串,被存储在responseText属性中

js需要使用eval语句将responseText转化为Json格式

例:var res1=eval("("+xmlHttpRequest.responseText+")");//转化为SON格式的数据

3.特点

优点

一种数据传输格式,json和XML相似,但是更加灵巧

且不需要从服务器内部发送含有特定内容的首部信息

缺点

语法过于严谨
代码不易读
eval 函数存在风险

5.Jquery和Ajax结合使用

1.传统Ajax不足

​ 方法、属性、常用值较多不好记忆

​ 步骤繁琐

​ 浏览器兼容问题

2.jQuery常用Ajax方法

  1. $.ajax()

  2. $.get()

  3. $.post()

    ​ $.ajax(url,[settings]);

    方法:

     	1. function beforeSend(XMLHttpRequest xmlHttpRequest)	发送请求前调用的函数
     1. xmlHttpRequest    可选
     	2. function complete(XMLHttpRequest xmlHttpRequest,String s)请求完成后调用的函数
     1. xmlHttpRequest    可选,由服务器返回的数据
     2. s    可选,描述请求类型的字符
     	3. function success(Object result,String s)    请求成功后调用的函数
       		1. result 	可选,由服务器返回的数据
       		2. s    可选,描述请求类型的字符串
    
    1. function error(XMLHttpRequest xmlHttpRequest,String em,Exception e) 请求失败时调用的函数

      1. xmlHttpRequest 可选
      2. em 可选,错误信息
      3. e 可选,捕获的异常对象

      属性:

      1. String url 发送请求的地址
      2. String type 请求方式
      3. Number timeout 设置请求超时时间
      4. Object data 发送到服务器的数据
      5. String dataType 预期服务器返回的数据类型,例:XML,HTML,JSON,TEXT
      6. blobal 表示是否触发全局Ajax事件,默认为true
    2jQueryAjax.jsp
    
    <script type= "text/javascript" src= "../js/jquery-1.8.2.js" ></script>
    <script type= "text/javascript" >
    $( function(){
    	$("#um").blur(
    		function(){
    				$.ajax({
    					type:"get",
    					url: "3jQueryAjaxFoeward.jsp",
                        dataType:"json",
    					data: "uname="+this.value,
                     	timeout:3000,
    					success:  function(msg){
    				//表示响应成功
    				// alert(msg);
    				if($.trim(msg)=="true"){
    					$("#sp").html("该用户名存在!");
    					} else{
    					$("#sp").html("该用户名不存在,可以使用!");
    					}
    						},
    				error: function() { //请求失败后要执行的代码
    					alert("Ajax请求失败");
    			}
    		}
    		);
    	});
    });
    </script>
    <body>
    用户名: <input type= "text" name= "uname" id= "um" />
    <span id= "sp" /></span>
    </body>
    
    
    3jQueryAjaxFoeward.jsp
    
    <%
    //注意此时在该页面中加入脚本时,html等代码不要加入,否则服务器端响应的数据内容就
    //不是true或false
    String name=request.getParameter("uname");
    //System.out.println("xingming="+name);
    //注意此时在该页面中加入脚本时,html等代码不要加入,否则服务器端响应的数据内容就不是true或false
    if("li".equals(name)){
    out.print("true");
    } else{
    out.print("false");
    }
    %>
    

本文链接: http://www.dtmao.cc/news_show_350143.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?