原生Ajax怎么写

PHP中文网 • 2025年3月8日 00:23:51 • 编程技术 • 阅读 2

写原生Ajax的方法：首先创建XMLHttpRequest对象；然后编写回调函数onreadystatechange；接着配置请求信息；最后发送请求即可。

Ajax（Asynchronous JavaScript and XML的缩写）是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。

简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。

想要对Ajax有一个全面的了解，这里可以去Js教程中对它进行一个全方面认识。

现在Ajax经过各种优化已经变得非常方便了，例如使用Jquery只需要一行便可以使用Ajax了。

那么原生的Ajax是什么样呢？

让我们来看一下吧。

 function ajax(url){//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有//XMLHttpRequest对象，而是用的ActiveXObject对象       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")       xhr.open("get",url,true);       xhr.send();//发送请求       xhr.onreadysattechange = () =>{           if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。               if(xhr.status == 200){//返回状态码                   var data = xhr.responseTEXT;                   return data;               }           }       }       }

登录后复制

readystate：

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status ：

200: “OK”

404: 未找到页面

405：请求方式不正确

500：服务器内部错误

403：禁止请求

Ajax有两种请求方式：

get请求方式

function ajax() {//创建核心对象xhr = null;if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象xhr = new XMLHttpRequest();} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象xhr = new ActiveXObject("Microsoft.XMLHTTP");}//编写回调函数xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText)}}//open设置请求方式和请求路径xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步//send 发送xhr.send();}

登录后复制

post请求方式

function ajax() {//创建核心对象xhr = null;if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.xhr = new XMLHttpRequest();} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象xhr = new ActiveXObject("Microsoft.XMLHTTP");}//编写回调函数xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText)//警告框，显示返回的Text}}//open设置请求方式和请求路径xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步//设置请求头xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")//send 发送xhr.send("userId=10");}

登录后复制

以上就是原生Ajax怎么写的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2731037.html