Ajax基础知识详解

发布时间 - 2026-01-10 23:07:22    点击率:

Ajax主要的功能是实现了浏览器端 异步 访问服务器:通过浏览器的XMLHttpRequest对象发出小部分数据,与服务端进行交互,服务端返回小部分数据,然后更新客户端的部分页面。

1.先实例化XMLHttpRequest对象

var request;
if (window.XMLHttpRequest){
 request=new XMLHttpRequest();
}
else{
 request=new ActiveXObject("Microsoft.XMLHTTP");
 //兼容ie5 6
}

2.XMLHttpRequest的方法将请求发送给服务器

request.open("POST",get.php,true);//请求
//设置http的头信息,告诉服务器我们要以send键值对方式发送一个表单,
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST必须设置Content-Type的值在open与send之间
request.send("name=王二狗&sex=男");//用send方法提交给服务端

3.获取响应的方法

responseText 获得字符串形式的响应数据
responseXML 获得XML形式的响应数据
status和statusText 以数字和文本形式返回HTTP状态码
getAllResponseHeader() 获取所有的响应报头
getResponseHeader() 查询响应中的某个字段的值

4.监听readyState属性的变化很重要

    为0 请求未初始化,open还没有被调用

    为1 服务器连接已建立,open已经调用了

    为2 请求已被接收,接收到头的信息了

    为3 请求处理中,接收到响应体了

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

//readyState变化时触发
//通过onreadystatechange事件判断readyState属性的变化
request.onreadystatechange=function(){
 if(request.readyState===4&&request.status===200){
 //做一些事情 比如获取响应数据request.responseText
 }
}

5.完整XHR

var request=new XMLHttpRequest();//1.创建XHR对象
request.open("GET","get.php?number=" +表单里需要提交的数据,true);//2.调用open方法
//这里如果是post请求。send的就是一个包含数据的对象
request.send();//发送一些数据
request.onreadystatechange=function(){ //3.进行监听判断服务器是否正确响应
 if(request.readyState===4&&request.status===200){
 //4.做一些事情 比如获取服务器响应内容request.responseText
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


# ajax基础  # ajax知识点  # C#如何解析http报文  # HTTP报文及ajax基础知识  # 服务端  # 表单  # 还没有  # 已被  # 很重要  # 要以  # 键值  # 是否正确  # 客户端  # 实现了  # 发送给  # 完成了  # 王二  # php  # open  # POST  # Ajax  # request  # send  # true 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 利用JavaScript实现拖拽改变元素大小  黑客入侵网站服务器的常见手法有哪些?  如何在建站之星绑定自定义域名?  如何用5美元大硬盘VPS安全高效搭建个人网站?  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  如何破解联通资金短缺导致的基站建设难题?  Laravel如何集成Inertia.js与Vue/React?(安装配置)  详解Android图表 MPAndroidChart折线图  如何在服务器上配置二级域名建站?  如何在自有机房高效搭建专业网站?  Laravel中的Facade(门面)到底是什么原理  香港服务器部署网站为何提示未备案?  如何在七牛云存储上搭建网站并设置自定义域名?  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站?  HTML 中动态设置元素 name 属性的正确语法详解  如何在IIS7中新建站点?详细步骤解析  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm,可以有哪些措施降低舍内氨气水平?  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊?  Laravel如何实现模型的全局作用域?(Global Scope示例)  如何用JavaScript实现文本编辑器_光标和选区怎么处理  Laravel如何配置任务调度?(Cron Job示例)  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  Laravel Eloquent:优雅地将关联模型字段扁平化到主模型中  Laravel如何实现数据库事务?(DB Facade示例)  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  简单实现Android验证码  详解MySQL数据库的安装与密码配置  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  打造顶配客厅影院,这份100寸电视推荐名单请查收  Laravel如何使用Blade模板引擎?(完整语法和示例)  浅述节点的创建及常见功能的实现  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  Laravel如何实现本地化和多语言支持?(i18n教程)  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  如何在建站主机中优化服务器配置?  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  如何用虚拟主机快速搭建网站?详细步骤解析  如何有效防御Web建站篡改攻击?  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  php 三元运算符实例详细介绍  魔方云NAT建站如何实现端口转发?  教你用AI将一段旋律扩展成一首完整的曲子  Laravel如何实现多对多模型关联?(Eloquent教程)  如何在IIS管理器中快速创建并配置网站?