博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax技术
阅读量:5128 次
发布时间:2019-06-13

本文共 1273 字,大约阅读时间需要 4 分钟。

  ajax是一种无须刷新页面就能为页面中的某部分加载数据的技术,其原理是通过XMLHTTPRequest对象请求服务器获取信息,转换成字符串,以DOM操作添加到页面,从而实现无须刷新即可加载数据。

  使用ajax时浏览器会先向服务器发送一个请求,然后服务器响应并且返回了这个请求(通常是HTML、XML和json格式),最后浏览器处理了返回的内容并且将其添加到了页面上。

  请求过程:

var xhr = new XMLHttpRequest();    //创建一个XMLHttpRequest的实例对象xhr.open('GET','data/test.json', true);  //open方法会准备一个请求,这个请求有三个参数,1HTTP方法  2处理请求的页面地址  3是否异步xhr.send(null);  //send方法将准备好了的请求发送到服务器

  ajax的对象在IE5,IE6使用ActiveXObject对象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  //兼容IE5,IE6

  open第一个参数HTTP方法有两个请求,一个是GET请求,一个是POST请求。

  第二个参数是处理页面的地址

  第三个参数:true代表异步请求,false代表同步,异步是指处理请求的时候可以继续执行后面的代码,同步则是必须等服务器响应返回了结果之后才会执行后续代码

  

  响应: 

xhr.onreadystatechange = function () {        if (xhr.readyState == 4 && xhr.status == 200){
document.getElementById('content').innerHTML = xhr.responseText; } }

  onreadystatechange 存储一个函数(或函数名),没当readyState状态发生变化时,就会调用该对象

  readyState 存有XMLHttprequest的状态,值是0到4之间

  0  请求为初始化

  1  服务器连接已建立

  2  请求已接收

  3  请求处理中

  4  请求已完成,且响应已就绪

  status 当服务器响应了任何请求就会返回一条状态码

  200  服务器响应了请求,一切正常

  304  没有变化

  404  页面未找到

  500  服务器内部错误

  

  当条件都满足之后则可以将 responseText方法返回的数据添加到页面上,xml格式可以使用responseXML方法。

  好了以上就是ajax的一个简单的页面

转载于:https://www.cnblogs.com/tanhuidong/p/8824275.html

你可能感兴趣的文章
iOS- static extern const
查看>>
“软件工程第二次作业—结对编程”
查看>>
Markdown的使用简介
查看>>
.netcore2.0发送邮件
查看>>
在vue中使用weixin-js-sdk自定义微信分享效果
查看>>
CentOS 初体验十四:阿里云安装Gitlab
查看>>
十分钟轻松让你认识Entity Framework 7
查看>>
Web开发框架之权限管理系统
查看>>
SQL Server索引语法 <第四篇>
查看>>
react新手报错日记
查看>>
Android 上传文件到 FTP 服务器
查看>>
参考性文章,也算有用吧
查看>>
javaScriptObject转String
查看>>
UE4 优化参数
查看>>
西数常用TREX命令
查看>>
SpringMVC学习笔记1
查看>>
每天拿出来2小时浪费
查看>>
NSBundle pathForResource取不到值问题
查看>>
fiddler抓取https失败解决方案
查看>>
Windows定时任务没有执行
查看>>