Ajax入门必知

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

原始的Ajax

1,创建XMLHttpRequest对象的实例

var xmlHttpReq;

if (window.ActiveXObject){

xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest();

}

2.使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式 xmlHttpReq.open("GET"(http请求的方式),"9-2.html(请求的URL) ",True(是否为异步方式));

3.使用open()方法指定了请求后,还要用send()方法将请求发送出去
xmlHttpReq.send(null);

4.使用onreadystatechange事件监听服务器

用send()方法发送了一个载入文档的请求后,还要准备接收服务器端返回的文档或内容

这时需要用事件监听机制来捕获请求的状态,onreadystatechange事件实现这一功能

xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack(){ if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById("target").innerHTML = xmlHttpReq.responseText;

}

}


1.onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发,readyState的值表示服务器对当前请求的处理状态,可以根据这个值来进行不同的处理。
readyState有五种可取值(0:尚未初始化;1:正在加载;2:加载完毕;3:正在处理;4:处理完毕)
status属性表明请求是否已经成功,如果status属性值为200表明一切正常,服务器已成功接收了客户端的请求

2.服务器在收到客户端的请求后,根据请求返回相应的内容。 文本形式: 存储在responseText中, XML格式: 存储在responseXML中。
它们都是只读属性,只有当readyState属性值为4的时候,才能通过它们获取完整的响应信息。
如果设置服务器端响应内容类型为Response.ContentType="text/xml",responseXML才会有值并被解析成一个XML文档。


XMLHttpRequest对象

1 XMLHttpRequest对象虽然名称中含有XML,但它并不限于和XML文档一起使用,它可以接收任何形式的文本文档,如HTML文档、JSON文档、XML文档等。
2 XMLHttpRequest对象与PHP中的Request对象的功能也完全不同,Request对象是服务器端的对象,它的作用是获取从客户端发送来的数据;而XMLHttpRequest对象是位于客户端浏览器中的对象,它的作用是发送数据给服务器后再从服务器获取传回来的数据

5.发送数据给服务器

Get方式
xmlhttp.open("get","9-3.PHP?user=tang&n=" + Math.random());


Post方式
xmlhttp.open("post","9-3.PHP");
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("username="+user+ "&n=" + Math.random());

JqueyAjax


使用load方法(只用于 HTML载入)

载入HTML文档

load()方法能载入远程HTML文档并将其插入到指定的DOM元素中。它的语法为 load( url [,data ] [,callback])

vfunction Ajax(){ $(“#target”).load( “9-5.html .title”); // URL和选择器之间必须有一个空格
}
<input type="button" value="Ajax载入" onclick="Ajax();"/>
<div id="target"></div>
发送数据给服务器
function Ajax(){$("#target")

.load("9-6.PHP?

user=张三&comment=很好"//---以GET方式发送

,{nick:"rain",age:22}) } //---以POST方式发送

使用get()方法

function Ajax(){
$.get(“9-11.PHP”,{user:$(“#user”).val(),comment:$(“#comment”).val()},

function(data){ $("#target").append(data);
});
}

使用$.post()方法

$.post("9-11.asp",{user:$("#user").val(),comment:$("#comment").val()},function(data){ $("#target").append(data);});
服务器端程序可以用Request集合获取数据
<% user=request.Form("user") comment=request.Form("comment") response.Write "<h3>评论人"&user&"</h3>“ %>

1 GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然,在Ajax请求中,用户看不到这种区别

2 GET方式对传输的数据有大小限制,通常不能超过2KB,而使用POST方式传递的数据量要比GET方式大得多,理论上没有限制。

3 GET方式请求的数据会被浏览器缓存起来,而POST方式请求的数据不会被浏览器缓存

4 通过GET方式和POST方式传递给服务器端的数据,服务器端需要采用不同的方式获取

使用$.ajax()方法

$.ajax()方法是jQuery中最底层的Ajax实现,load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构造的,它的语法为:
$.ajax(options)
示例:
$.ajax({ type: “GET”, //设置请求方式 url: “9-8.js”, //设置请求的URL dataType: “script” //设置返回数据的类型 })

原始的Ajax vs Jquery Ajax

猜你在找的Ajax相关文章