我们都遇到过的这些ajax代码到底什么意思?

简介: 我们都遇到过的这些ajax代码到底什么意思?

hello,我是小索奇,本篇文章给大家带来ajax中常用的一些代码,为什么写这些呢?


因为小索奇也看黑马、尚硅谷等老师的视频,在学习java的时候经常会介绍ajax,导致很多不了解的伙伴一脸懵然,以防万一,这里还是介绍下吧~


xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

这段代码是一个使用 Ajax 技术向服务器发送 GET 请求、获取返回数据并更新页面的示例。具体来说,这段代码中包含以下几个部分:


1.xmlhttp对象的创建

var xmlhttp = new XMLHttpRequest();


在这里,我们使用 XMLHttpRequest 对象实现了 Ajax 的请求。XMLHttpRequest 是原生支持的 JavaScript 对象,它可以直接向服务器发送 HTTP 请求,并获取返回的数据。


2.状态变化的监听

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

这里我们通过 onreadystatechange 属性,为 XMLHttpRequest 对象添加一个状态变化的监听函数。当 readyState 值发生变化时,该函数会被触发执行。readyState 表示 XMLHttpRequest 的状态,有五种可能的取值,分别对应以下含义:


0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

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

在这个示例中,我们判断当 readyState 变成了 4,而且 status 码为 200(表示服务器返回了成功的响应)时,我们就将服务器返回的文本内容更新到网页上。


设置请求参数并发送请求

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();


最后我们通过 open() 方法设置了请求的类型(GET)、请求的 URL (本例中的 URL 为 "/try/ajax/ajax_info.txt"),以及是否使用异步方式发送请求(最后一个参数为 true)。


最后,我们调用 send() 函数向服务器发送请求。这个函数可以接受一个请求体参数(对于 GET 请求来说,请求体为空),如果需要像 POST 请求一样发送数据给服务器,就需要在这里传入一个字符串作为请求体。


这些就是常见的ajax代码啦~


相关文章
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
127 0
|
前端开发
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
94 0
|
7月前
|
前端开发 JavaScript 关系型数据库
PHP代码合集21个邮箱2个问答23个ajax特效
PHP代码合集21个邮箱2个问答23个ajax特效
39 0
|
JavaScript 前端开发
Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中
Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中
|
前端开发 数据可视化
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
124 0
|
JavaScript 前端开发
ajax未分装前JS代码形式
ajax未分装前JS代码形式
|
前端开发 JavaScript
tp5中前端js代码中ajax请求url问题
tp5中前端js代码中ajax请求url问题
171 0
|
JavaScript 前端开发 PHP
Ajax完整资料加代码
网页无刷新技术      答:Ajax是一种无需加载整个网页,就能够更新部分网页,与后台交互的技术。 Ajax的优点?      答:能够在不更新整个页面的前提下,维护数据。这使得Web程序可以更快速的回应用户的动作,而无需加载不必要的数据。
1282 0
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
75 1