Ajax原理及使用

前端之家收集整理的这篇文章主要介绍了Ajax原理及使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_502_4@@H_502_4@1、ajax@H_502_4@是什么@H_502_4@ @H_502_4@?@H_502_4@@H_502_4@

①@H_502_4@@H_502_4@ajax(asynchronouse javascript and xml) @H_502_4@异步的@H_502_4@javascript @H_502_4@和@H_502_4@ xml@H_502_4@

@H_502_4@@H_502_4@@H_502_4@@H_502_4@7@H_502_4@种技术的综合@H_502_4@,@H_502_4@它包含了七个技术@H_502_4@( javascrip@H_502_4@t xml@H_502_4@ xstl xhtml dom@H_502_4@ xmlhttprequest@H_502_4@ css), @H_502_4@ajax @H_502_4@@H_502_4@是一个粘合剂@H_502_4@,@H_502_4@

③@H_502_4@@H_502_4@ajax@H_502_4@是一个与服务端语言无关的技术@H_502_4@. @H_502_4@即可以使用在@H_502_4@(PHP/java ee/.net@H_502_4@网站@H_502_4@/ asp)@H_502_4@

@H_502_4@@H_502_4@@H_502_4@ajax@H_502_4@可以给客户端返回三种格式数据@H_502_4@(@H_502_4@文本格式@H_502_4@ @H_502_4@,@H_502_4@xml,json@H_502_4@格式@H_502_4@)@H_502_4@

⑤@H_502_4@@H_502_4@无刷新数据交换技术有以下@H_502_4@: flash,java applet,@H_502_4@框架@H_502_4@,iframe, @H_502_4@ajax)@H_502_4@

@H_502_4@@H_502_4@@H_502_4@2、ajax @H_502_4@的运行原理分析@H_502_4@

ajax更详细的原理图@H_502_4@


3、@H_502_4@使用@H_502_4@ajax@H_502_4@与服务器通信的的步骤@H_502_4@@H_502_4@

4、@H_502_4@使用ajax完成用户名是否存在验证@H_502_4@

@H_502_4@registerProcess.jsp

<%@ page contentType="text/html" pageEncoding="utf-8"%>
<%
  String username = request.getParameter("username");
  if("dahao".equals(username)){ //3号线
	  out.print("用户名不可用");
  }
  else out.print("用户名可用");
%>
register_get.html

使用get方式向服务器提交请求

<html>
<head>
    <title>用户注册</title>
    <Meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript">
        //创建ajax引擎
        function getXmlHttpObject(){

            var xmlHttpRequest;
            if(window.ActiveXObject){
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else{
                xmlHttpRequest = new XMLHttpRequest();
            }
            return xmlHttpRequest;
        }

        function $(id) {
            return document.getElementById(id);
        }

        //验证用户名是否存在
        var myXmlHttpRequest = "";
        function checkUser() {
            myXmlHttpRequest = getXmlHttpObject(); //1号线

            //判断是否创建成功
            if (myXmlHttpRequest) {
                //通过myXmlHttpRequest对象发送请求到服务器的某个页面
                //第一个参数表示请求的方式,“get”/“post”
                //第二个参数指定URL,对哪个页面发出ajax请求(本质仍然是http请求)
                //第三个参数true表示使用异步机制,false即不使用
                var url = "/ajax/registerProcess.jsp?username=" + $("username").value;
                //打开请求
                myXmlHttpRequest.open("get",url,true);

                //指定回调函数,process是函数名
                myXmlHttpRequest.onreadystatechange = process;

                //发送请求,如果是get请求,填入null即可;如果是post请求,则填入实际的数据
                myXmlHttpRequest.send(null);  //2号线
            }
        }

        //回调函数
        function process() {
            //window.alert("函数调用" + myXmlHttpRequest.readyState);
            if(myXmlHttpRequest.readyState == 4) {  //4号线
                //取出服务器返回的值
                //window.alert("服务器返回:" + myXmlHttpRequest.responseText);

                $("myres").value = myXmlHttpRequest.responseText;
            }
        }
    </script>
</head>

<body>
<form action="???" method="post">
    用户名字:<input type="text" onblur="checkUser();" name="username1" id="username">
    <input style="border-width:0;color:red" type="text" id="myres">
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
</form>
<form action="???" method="post">
    用户名字:<input type="text" name="username2" >
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
</form>
</body>
</html>
register_post.html

使用post方式向服务器提交请求

<html>
<head>
    <title>用户注册</title>
    <Meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript">
        //创建ajax引擎
        function getXmlHttpObject(){

            var xmlHttpRequest;
            if(window.ActiveXObject){
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else{
                xmlHttpRequest = new XMLHttpRequest();
            }
            return xmlHttpRequest;
        }

        function $(id) {
            return document.getElementById(id);
        }

        //验证用户名是否存在
        var myXmlHttpRequest = "";
        function checkUser() {
            myXmlHttpRequest = getXmlHttpObject(); //1号线

            //判断是否创建成功
            if (myXmlHttpRequest) {
                //通过myXmlHttpRequest对象发送请求到服务器的某个页面
                //第一个参数表示请求的方式,“get”/“post”
                //第二个参数指定URL,对哪个页面发出ajax请求(本质仍然是http请求)
                //第三个参数true表示使用异步机制,false即不使用
                var url = "/ajax/registerProcess.jsp";
                //这个是要发送的数据
                var data = "username="+$("username").value;
                //打开请求
                myXmlHttpRequest.open("post",true);
                //使用post方式发送时,这句话是必需的
				myXmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //指定回调函数,如果是get请求,填入null即可;如果是post请求,则填入实际的数据
                myXmlHttpRequest.send(data);  //2号线
            }
        }

        //回调函数
        function process() {
            //window.alert("函数调用" + myXmlHttpRequest.readyState);
            if(myXmlHttpRequest.readyState == 4) {  //4号线
                //取出服务器返回的值
                //window.alert("服务器返回:" + myXmlHttpRequest.responseText);

                $("myres").value = myXmlHttpRequest.responseText;
            }
        }
    </script>
</head>

<body>
<form action="???" method="post">
    用户名字:<input type="text" onblur="checkUser();" name="username1" id="username">
    <input style="border-width:0;color:red" type="text" id="myres">
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
</form>
<form action="???" method="post">
    用户名字:<input type="text" name="username2" >
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
</form>
</body>
</html>
运行结果如下:

猜你在找的Ajax相关文章