Ajax学习第一节_Ajax入门

前端之家收集整理的这篇文章主要介绍了Ajax学习第一节_Ajax入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  • 什么是Ajax?

  • @H_404_8@

    Ajax是asynchronousJavaScriptandXML的缩写,是一种创建交互式网页应用的网页开发技术。

      在哪里使用Ajax?

      @H_404_8@

      不需要刷新整个页面,适合使用Ajax,例如:用户注册的时候验证用户名是否重复,无刷新登录,在线聊天室等。

        如何使用Ajax?

        @H_404_8@

        Ajax中Get方式异步发送请求源码下载:http://pan.baidu.com/s/1qY9rGIw

        运行效果

        创建Ajax引擎

            //创建Ajax引擎
        functioncreateXmlHttpRequest(){
        if(window.ActiveXObject){
        //ie6中创建xmlHttpRequest方法
        xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
        }else{
        //firfox、chrome、IE7
        xmlHttpRequest=newXMLHttpRequest();
        }
        }

        提交Ajax请求

        functioncheckUserName(){
        //创建Ajax引擎
        createXmlHttpRequest();
        if(xmlHttpRequest){
        varuserName=document.getElementById("userName").value;
        //请求URL,encodeURI两次防止中文乱码
        varurl="Regedit?userName="+encodeURI(encodeURI(userName));
        //get表示请求方式:get/post url请求的地址,true表示异步,false表示同步
        xmlHttpRequest.open("get",url,true);
        //回调函数
        xmlHttpRequest.onreadystatechange=chuli;
        //发送请求
        xmlHttpRequest.send(null);
        }
        }

        servlet后台处理

        protected void doGet(HttpServletRequest request,HttpServletResponse response)
        throws ServletException,IOException {
        //设置返回的编码
        response.setContentType("text/html;charset=utf-8");
        // URLDecoder解码
        String userName = URLDecoder.decode(request.getParameter("userName"),"UTF-8");
        //使用PrintWriter打印到界面上
        PrintWriter out = response.getWriter();
        if (userName.equals("xukaiqiang")) {
        out.println(userName + "已经存在!");
        } else {
        out.println(userName + "用户名可以使用!");
        }
        //关闭
        out.close();
        }


        回调函数处理

        //回调函数
        function chuli() {
        if (xmlHttpRequest.readyState == 4) {
        document.getElementById("msg").innerHTML = xmlHttpRequest.responseText;
        }
        }
        • readyState 属性
          readyState 属性存有服务器响应的状态信息。
          当 readyState 改变时,onreadystatechange 函数就会被执行

        • @H_404_8@

          这是 readyState 属性可能的值:

          状态 描述
          0 请求未初始化(在调用 open() 之前)
          1 请求已提出(调用 send() 之前)
          2 请求已发送(这里通常可以从响应得到内容头部)
          3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
          4 请求已完成(可以访问服务器响应并使用它)

          • 原理

            由事件(onblur,onchange等)触发,创建一个xmlHttpRequest对象(XHR),然后通过servlet/action或者其他方式,从数据库获取数据,交给xmlHttpRequest对象处理,交给回调函数进行处理显示

          • @H_404_8@

猜你在找的Ajax相关文章