JQuery与Ajax常用代码 转发

传统ajax


<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
    
if(window.ActiveXObject)
        xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
    
else if(window.XMLHttpRequest)
        xmlHttp 
= new XMLHttpRequest();
}
function startRequest(){
    createXMLHttpRequest();
    xmlHttp.open(
"GET","14-1.aspx",true);
    xmlHttp.onreadystatechange 
= function(){
        
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            document.getElementById(
"target").innerHTML = xmlHttp.responseText;
    }
    xmlHttp.send(
null);
}
</script>

 

JQuery方法

 


<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
    $(
"#target").load("14-1.aspx");
}
</script>

get and post

 

Code

 

控制ajax

 


<title>$.ajax()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    
//必须两次编码才能解决中文问题
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    
var birthday = encodeURI(encodeURI($("#birthday").val()));
    
//组合成对象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    
return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        type: 
"GET",
        url: 
"14-5.aspx",
        data: createQueryString(),
        success: 
function(data){
            $(
"#serverResponse").html(decodeURI(data));
        }
    });
}
function doRequestUsingPOST(){
    $.ajax({
        type: 
"POST",
        url: 
"14-5.aspx",
        data: createQueryString(),
        success: 
function(data){
            $(
"#serverResponse").html(decodeURI(data));
        }
    });
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
    
<input type="text" id="firstName" /><br>
    
<input type="text" id="birthday" />
</form>
<form>
    
<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    
<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

全局设置ajax

 


<title>$.ajaxSetup()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.ajaxSetup({
    
//全局设定
    url: "14-5.aspx",
    success: 
function(data){
        $(
"#serverResponse").html(decodeURI(data));
    }
});
function createQueryString(){
    
//必须两次编码才能解决中文问题
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    
var birthday = encodeURI(encodeURI($("#birthday").val()));
    
//组合成对象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    
return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        data: createQueryString(),
        type: 
"GET"
    });
}
function doRequestUsingPOST(){
    $.ajax({
        data: createQueryString(),
        type: 
"POST"
    });
}
</script>

你可能感兴趣的:(jquery)