什么是 ajax
ajax = asynchronous javascript and xml（异步的 javascript 和 xml）。
ajax 不是新的编程语言，而是一种使用现有标准的新方法。
ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下(ajax 是一种用于创建快速动态网页的技术)。
通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 ajax）如果需要更新内容，必需重载整个网页面。
xmlhttprequest 对象
ajax的核心是javascript对象xmlhttprequest
我要评论
<script type="text/javascript">
function createxhr(){
var xhr = null;
try {
// firefox, opera .+, safari，ie+
xhr = new xmlhttprequest();
}
catch (e) {
// internet explorer
try {
xhr = new activexobject("msxml.xmlhttp");
}
catch (e) {
try {
xhr = new activexobject("microsoft.xmlhttp");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
}
</script>
xmlhttprequest对象用法
xmlhttprequest对象有两个重要方法 open与send
在使用xmlhttprequest对象时要调用的第一个方法是open方法，调用方式：xmlhttprequest.open(“get”,”default.aspx”,true); 这段代码会针对default.aspx页面发送get请求，关于这段代码有三点需要注意：
1. url是相对于当前页面的路径，也可以使用绝对路径
2. 调用open方法并不会真正的发送请求，而是初始化一个请求准备发送
3. 只能向同一个域中使用相同协议和端口的url发送请求，否则会因为安全原因报错
要想把请求发往服务器需要调用send方法，send方法接受一个参数，参数是请求主体要发送的数据，如果不需要发送数据则传入null，在调用send方法之后请求被发往服务器，如下
xhr.send(null);
请求发往服务器，服务器根据请求生成响应（response），传回给xhr对象，在收到响应后相应数据会填充到xhr对象的属性，有四个相关属性会被填充：
1. responsetext：作为响应主体被返回的文本
2. responsexml：如果响应内容的类型是”text/xml”或”application/xml”，这个属性将保存包含着相应数据的xml文档
3. status：响应的http状态（200,404,500等）
4. statustext：http状态说明
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readystate 改变时，就会触发 onreadystatechange 事件。
readystate 属性存有 xmlhttprequest 的状态信息。
下面是 xmlhttprequest 对象的三个重要的属性：
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readystate 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readystate== && xmlhttp.status==)
{
document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
}
}
我们可以在接受响应之前调用abort方法取消异步请求：xmlhttprequest .abort();
注意：
在使用xmlhttprequest对象的send()方法时，如果使用的是get请求或者不需要发送数据的post请求时，需要使用send(null);
如果想要发送数据数据，则需要使用post请求，先使用 setrequestheader() 来添加 http 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("post","ajax_test.asp",true);
xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=bill&lname=gates");
以上内容是小编给大家介绍的ajax教程实例详解，希望对大家有所帮助！
如对本文有疑问， 点击进行留言回复！！
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)
网友评论