原生Ajax实现与Jquery实现

最新推荐文章于 2022-08-27 22:11:45 发布

万一实现了

最新推荐文章于 2022-08-27 22:11:45 发布

阅读量643

点赞数

本文链接：https://blog.csdn.net/beloveddarling/article/details/52641439

版权

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

收藏

觉得还不错? 一键收藏
0
评论
原生Ajax实现与Jquery实现

Ajax; Asynchronous javascript and xml; 页面局部刷新的客户端技术； ajax包括的技术； html,css; javascript (最重要的) XHR(XMLHttpRequest对象) XML；（JSON）非同步(异步)请求的概念；同步：客户端
复制链接

扫一扫