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


相关推荐: Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  微信小程序 闭包写法详细介绍  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  公司网站制作价格怎么算,公司办个官网需要多少钱?  php 三元运算符实例详细介绍  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  Laravel如何使用Gate和Policy进行授权?(权限控制)  如何在橙子建站中快速调整背景颜色?  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  如何有效防御Web建站篡改攻击?  如何解决hover在ie6中的兼容性问题  C++时间戳转换成日期时间的步骤和示例代码  如何快速辨别茅台真假?关键步骤解析  微信小程序 wx.uploadFile无法上传解决办法  SQL查询语句优化的实用方法总结  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  Android使用GridView实现日历的简单功能  Windows家庭版如何开启组策略(gpedit.msc)?(安装方法)  Laravel如何使用withoutEvents方法临时禁用模型事件  Laravel如何使用Socialite实现第三方登录?(微信/GitHub示例)  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  如何在Windows虚拟主机上快速搭建网站?  如何批量查询域名的建站时间记录?  零服务器AI建站解决方案:快速部署与云端平台低成本实践  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  如何在阿里云香港服务器快速搭建网站?  大学网站设计制作软件有哪些,如何将网站制作成自己app?  如何在阿里云部署织梦网站?  JavaScript数据类型有哪些_如何准确判断一个变量的类型  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗?  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Mybatis 中的insertOrUpdate操作  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  UC浏览器如何设置启动页 UC浏览器启动页设置方法  香港服务器WordPress建站指南:SEO优化与高效部署策略  在centOS 7安装mysql 5.7的详细教程  ,在苏州找工作,上哪个网站比较好?  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  如何在云指建站中生成FTP站点?  黑客如何通过漏洞一步步攻陷网站服务器?  网站建设保证美观性,需要考虑的几点问题!  如何确认建站备案号应放置的具体位置?  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Laravel如何使用Eloquent ORM进行数据库操作?(CRUD示例)  音乐网站服务器如何优化API响应速度?  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  如何用IIS7快速搭建并优化网站站点?  简单实现jsp分页  如何在云主机上快速搭建多站点网站?