原生Ajax实现与Jquery实现

来源：互联网发布：grub4dos 引导linux 编辑：程序博客网时间：2024/06/06 14:21

Ajax;
Asynchronous javascript and xml;
页面局部刷新的客户端技术；
ajax包括的技术；
html,css;
javascript (最重要的)
XHR(XMLHttpRequest对象)
XML；（JSON）

非同步(异步)请求的概念；
同步：客户端发送一个请求，必须等待服务器处理完成后，才能继续发送其它的请求；
异步：客户端发送一个请求，不需要等待服务器处理完成，在服务器处理的过程中，客户端可以做其它的工作；服务器处理完成后会通知客户端；

如何实现AJAX
四个步骤；
1.创建 XHR对象；(不同的浏览器创建的代码不同)
2.打开连接 xhr.open(“get”,url,true);
3.设置回调函数;xhr.onreadystatechange=函数名
4.发送请求 xhr.send();
原生Ajax代码实现

<script type="text/javascript">    var xmlHttp;//声明全局XmlHttpRequest    function createXMLHttpRequest() //创建一个xmlhttprequest    {        if(window.ActiveXObject)//IE浏览器把xmlhttprequest看成一个activeX控件。        {            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");        }        else        {            xmlHttp= new XMLHttpRequest();//针对其他浏览器        }    }    function ajaxSend() {        var name = document.form.username.value;        xhr.open("get", "CheckServlet?name="+name, true)        xhr.onreadystatechange=callback;//函数名 状态码改变调用回调函数        xhr.send(null);//发送请求    }    function callback() {        if (xhr.readyState == 4) {        //请求完成，0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成        if(xhr.status==200){        //请求状态，200为正常返回。404 找不到服务器 500 服务器错误            alert(xhr.responseText);//responseText服务器返回的信息      }    </script><body>    <form action="" name="form">        test ajax <br>         username:<input type="text" name="username"><input            type="button" value="测试" onclick="ajaxSend()"><br> sex：<input            type="radio" name="sex" value="male"> 男 <input type="radio"            name="sex" value="female"> 女    </form>

后台servlet代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        String name=request.getParameter("name");        response.setCharacterEncoding("utf-8");         List<String> list=Arrays.asList("dear","darling","sweet","honey");         PrintWriter out=response.getWriter();         if(list.contains(name)){             out.println(name+"存在");         }else{             out.println(name+"可以使用");         }         out.flush();out.close();

Jquery代码实现

<script src="js/jquery-2.1.0.js"></script>    <script type="text/javascript">    $(function(){        $("#username").blur(function(){        $.get("login",{username:$(this).val()},        function(data){alert(data);});        });    });    </script>     <form >    username:<input type="text" name="username" id="username"/>     password:<input type="text" name="password"/>    <input type="submit" value="注册"/>    </form>

后台servlet代码

／／@WebServlet("/login")  servlet注解配置List<String> list=new ArrayList<String>();    public Login() {        super();        list.add("123");    }protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setCharacterEncoding("utf-8");        String username=request.getParameter("username");        PrintWriter out=response.getWriter();        if(list.contains(username)){            out.println("用户名已占");        }else{            out.println("用户名可以使用");        }        out.flush();out.close();    }

**jquery**   它是一个功能强大的js库；它将一些常用的js通用功能和操作进行了封装；是目前最流行的js库；write less,do more;

jquery的特点；
轻量级：小；
跨浏览器：ff
链式编程：让编程更加简单；
使用简单：入门快；
Jquery的Ajax操作
jquery为我们提供了丰富的ajax操作；
1 jQuery.get(url, [data], [callback], [type])
$.get(url,{json格式的参数},callback);
特点：get请求可以指定返回类型
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

2 .post();与.get() 相同；

3 .getJSON().getJSON(url, [data], [callback],})

4 $. ajax()最常用功能最全后面单独说明

5 .load().load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中
特点：简单实用
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 “success” 或 “notmodified” 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单：

小结
ajax请求；
jackson.jar ->将java对象转换成json格式的字符串；
ObjectMapper mapper=new ObjectMapper();
String str=mapper.writeValueAsString(object);
getJSON();

0 0