码迷,mamicode.com
首页 > Web开发 > 详细

Ajax

时间:2019-03-08 09:47:45      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:ESS   otto   position   取数据   line   form   word   expand   pos   

Ajax定义(引入)

“Asynchronous Javascript And XML”(异步JavaScript和XML),

并不是新的技术,只是把原有的技术,整合到一起而已


   1.使用CSS和XHTML来表示。

    2. 使用DOM模型来交互和动态显示。

    3.使用XMLHttpRequest来和服务器进行异步通信。

    4.使用javascript来绑定和调用。

创建对象

	function  ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
	
			return xmlHttp;
		 }
19
 
1
    function  ajaxFunction(){
2
           var xmlHttp;
3
           try{ // Firefox, Opera 8.0+, Safari
4
                xmlHttp=new XMLHttpRequest();
5
            }
6
            catch (e){
7
               try{// Internet Explorer
8
                     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
9
                  }
10
                catch (e){
11
                  try{
12
                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
13
                  }
14
                  catch (e){}
15
                  }
16
            }
17
    
18
            return xmlHttp;
19
         }

get请求

 function getFun() {
//创建对象
var request = ajaxFunction();

/*
参数一: 请求类型 GET or POST
参数二: 请求的路径
参数三: 是否异步, true or false
*/
//发送请求
request.open("GET","http://localhost:8080/HttpServletRequestDemo1?username=mlj",true);
//获取响应的数据
request.onreadystatechange = function(){

//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
};
request.send();



}

post请求

  function postFun() {
        //创建对象
      var request =   ajaxFunction();
      //发送数据
        request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
        request.send();
    }
    //带数据过去
    function postFun() {
        //创建对象
        var request =   ajaxFunction();
        //发送数据
        request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
        //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //带数据过去  , 在send方法里面写表单数据。
        request.send("username=aobama");
    }
    //获取数据
    function postFun() {
        //创建对象
        var request =   ajaxFunction();
        //发送数据
        request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
        //想获取服务器传送过来的数据, 加一个状态的监听。
        request.onreadystatechange=function(){
            if(request.readyState==4 && request.status == 200){

                alert("post:"+request.responseText);
            }
        }
        //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //带数据过去  , 在send方法里面写表单数据。
        request.send("username=aobama");
    }
38
 
1
  function postFun() {
2
        //创建对象
3
      var request =   ajaxFunction();
4
      //发送数据
5
        request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
6
        request.send();
7
    }
8
    //带数据过去
9
    function postFun() {
10
        //创建对象
11
        var request =   ajaxFunction();
12
        //发送数据
13
        request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
14
        //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
15
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
16
17
        //带数据过去  , 在send方法里面写表单数据。
18
        request.send("username=aobama");
19
    }
20
    //获取数据
21
    function postFun() {
22
        //创建对象
23
        var request =   ajaxFunction();
24
        //发送数据
25
        request.open("POST","http://localhost:8080/HttpServletRequestDemo1",true);
26
        //想获取服务器传送过来的数据, 加一个状态的监听。
27
        request.onreadystatechange=function(){
28
            if(request.readyState==4 && request.status == 200){
29
30
                alert("post:"+request.responseText);
31
            }
32
        }
33
        //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
34
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
35
36
        //带数据过去  , 在send方法里面写表单数据。
37
        request.send("username=aobama");
38
    }


onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:


0-4状态

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

302重定向

500服务器内部错误或发出程序异常

get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1"></div>
<script src="../js/jquery-1.11.0.js"></script>
<script>
    $.get("/ServletTest?username=mljqqhq",{ name: "John", },function (data,status) {
        $("#div1").html(data+status);//data是服务器响应的数据
        
    })
</script>

</body>
</html>
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<div id="div1"></div>
9
<script src="../js/jquery-1.11.0.js"></script>
10
<script>
11
    $.get("/ServletTest?username=mljqqhq",{ name: "John", },function (data,status) {
12
        $("#div1").html(data+status);//data是服务器响应的数据
13
        
14
    })
15
</script>
16
17
</body>
18
</html>

post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1"></div>
<script src="../js/jquery-1.11.0.js"></script>
<script>
    $.post("/ServletTest",{"username":"mljqqhpost"},function (data,status) {
        $("#div1").html(data+status);//data是服务器响应的数据
        
    })
</script>

</body>
</html>
x
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<div id="div1"></div>
9
<script src="../js/jquery-1.11.0.js"></script>
10
<script>
11
    $.post("/ServletTest",{"username":"mljqqhpost"},function (data,status) {
12
        $("#div1").html(data+status);//data是服务器响应的数据
13
        
14
    })
15
</script>
16
17
</body>
18
</html>

ajax()

 $.ajax({
                url:"/ajaxDemo",
                data:{"name":"哈哈哈","age":4},
                async:true,
                type:"GET",
                dataType:"text",
                success:function (succRes) {
                    alert(succRes);
                },
                error:function (errorRes) {
                    alert("出现异常了")
                }
            });
1
 $.ajax({
2
                url:"/ajaxDemo",
3
                data:{"name":"哈哈哈","age":4},
4
                async:true,
5
                type:"GET",
6
                dataType:"text",
7
                success:function (succRes) {
8
                    alert(succRes);
9
                },
10
                error:function (errorRes) {
11
                    alert("出现异常了")
12
                }
13
            });
技术图片

Ajax

标签:ESS   otto   position   取数据   line   form   word   expand   pos   

原文地址:https://www.cnblogs.com/mljqqh/p/10493728.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!