Ajax与jQuery、json

一、Ajax简介

Ajax(Asynchronous JavaScript and Xml)--异步刷新技术

Ajax的关键元素包括以下内容：

① JavaScript语言：Ajax技术的主要开发语言。

② XML/JSON/HTML等：用来封装请求或响应的数据格式

③ DOM(文档对象模型)：通过DOM属性或方法修改页面元素，实现页面局部刷新

④ CSS：改变样式，美化页面效果，提升用户体验度

⑤ Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据。

二、Ajax工作流程

三、常用方法：

四、常用属性

五、实现思路：

1、锁定用户名文本框，注册onblur事件

2、创建XMLHttpRequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式

3、设置回调函数。通过onreadystatechange属性设置回调函数，其中回调函数需要自定义

4、初始化XMLHttpRequest对象。通过open()设置请求的发送方式和路径

5、发送请求

准备简单页面：

 <body>用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>密码： <input type="password" name="txtPwd"/></body>

创建Servlet：回送信息

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String uname = request.getParameter("uname");if (uname.equals("admin")) {//用户已经被注册了//回送 信息response.getWriter().write("OK");}else {response.getWriter().write("NO");}

注：

步骤一：通过window。XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true，说明是新版本IE或其他浏览器，可使用new XMLHttpRequest()方式创建XMLHttpRequest对象；如果为false，说明是老版本IE浏览器，需使用new ActiveXObject("Microsoft.XMLHttp")的方式创建XMLHttpRequest对象

步骤二：通过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据

步骤三：通过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式，选择发送Httpget 请求，因此参数为get。第二个参数为要发送的url请求路径，将要发送的数据附加到url路径后面

步骤四：调用XMLHttpRequest对象的send()方法，参数为要发送到服务器端的数据，因为采用"get"方式请求时，参数已经附加到url路径后，所以直接设置为null。如果send()方法不设值，在不同的浏览器下可能存在不兼容问题。

执行完毕后，异步请求的发送过程就结束！

注：使用Ajax发送Post请求需注意要设置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

采用Get方式发送请求时，通常会将需要携带的参数附加在URL路径后面一起发送，所以send()不需要传递参数，设置为null即可

六、使用jQuery实现Ajax

jQuery常用的Ajax方法

语法：$.ajax([settings]);

常用属性参数:

常用函数参数：

使用$.ajax()验证用户名--使用$.ajax() 实现异步交互

注：需引jquery-1.11.1.js库

<html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function(){var dom=$("#txtName");dom.blur(function() {myjquery();});});function myjquery(){var dom=$("#txtName");$.ajax({url:'<%=path%>/servlet/CheckUserServlet',type:'post',data:{uname:dom.val()},success:function(result){alert(result);}        });            }    </script></head><body><h2>使用jQuery实现Ajax</h2>用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>密码： <input type="password" name="txtPwd"/></body>

实现效果：

若输入的非admin，即可注册，否则无法注册

若是post请求，调试效果如下：

七、JSON简介

JavaScript Object Notation是一种轻量级的数据交换格式

①定义Json对象

语法：var json对象={key:value,key:value,...}

② 定义Json数组

语法：var json数组=[value,value,...]

<script type="text/javascript">var data={"firstName":"Brett","lastName":"hehe"};$.each(data,function(i,dom){alert(dom);}); /* var data={"people":[{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}]
};
$.each(data.people,function(i,dom){alert(dom.firstName);});*/</script>

那么即可拿到每个dom对象：

转载于:https://www.cnblogs.com/WJ-163/p/5960761.html

Ajax与jQuery、json相关推荐

二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
使用jquery+json实现ajax的方法
在使用Jquery + json 的过程中由于一个小问题没有注意到,程序一直有错误.在网上找了很多JSON方面的文章但基本都是很简单的举例,所以我觉得有必要写一个完整的JQuery + json 实现 ...
jquery的ajax，请求JSON数据。
jquery的ajax,请求JSON数据. 第一个页面:1.htm <!DOCTYPE html> <html> <head> <title></ ...
html ajax请求jsp,JSP+jquery使用ajax方式调用json的实现方法
本文实例讲述了JSP+jQuery使用Ajax方式调用JSON的实现方法,在这里分享给大家以供大家参考,具体的实现以及代码如下所示: 前台: //test function test(uid) { i ...
jsp jquery ajax请求,JSP+jquery使用ajax方式调用json的实现方法
本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法.分享给大家供大家参考,具体如下: //test function test(uid) { if(confirm("确 ...
jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
jquery ajax 不执行success,jQuery通过ajax方法获取json数据不执行success的原因及解决方法...
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jq 请求本地的json_jQuery使用ajax读取本地json文件的案例
{ "first":[ {"name":"张三","sex":"男"}, {"name&q ...

Ajax与jQuery、json

Ajax与jQuery、json相关推荐

最新文章

热门文章