首页 > 其他分享 >AJAX概念、AJAX实现_原生js方式1

AJAX概念、AJAX实现_原生js方式1

时间:2022-08-23 13:45:54浏览次数:52  
标签:原生 异步 网页 请求 js AJAX xmlhttp 客户端

AJAX概念

  

1.概念︰ ASynchronous Javascript And XML异步的Javascript 和XAL
1.异步和同步:客户端和服务器端相互通信的基础上
*客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
*客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

 

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。[1]
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。|I

图解:

 

 

AJAX实现_原生js方式1

  实现方式:

      原生的js实现方法

      JQuery实现方式

       1.$.ajax()
       2. $.get()
       3. $.post() 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>

//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//2. 建立连接
/*
参数:
1. 请求方式:GET、POST
* get方式,请求参数在URL后边拼接。send方法为空参
* post方式,请求参数在send方法中定义
2. 请求的URL:
3. 同步或异步请求:true(异步)或 false(同步)

*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);

//3.发送请求
xmlhttp.send();

//4.接受并处理来自服务器的响应结果
//获取方式 :xmlhttp.responseText
//什么时候获取?当服务器响应成功后再获取

//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}

}

</script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

<input>
</body>
</html>

 

标签:原生,异步,网页,请求,js,AJAX,xmlhttp,客户端
From: https://www.cnblogs.com/ssr1/p/16615839.html

相关文章

  • 模仿安卓系统原生的亮度调节框 --->Android弹出框
    源码publicclassHintActivityextendsAppCompatActivity{publicstaticfinalStringTAG="HintActivity";@OverrideprotectedvoidonCreate(Bund......
  • AJAX复习笔记(二)
    跨域:跨域指的是从一个域名的网页请求另一个域名的资源。同源:当协议、域名、端口都一样时才是同源。AJAX请求在进行跨域访问时,可能会因为同源策略导致无法访问。 以下......
  • fastjson反序列化CNVD-2019-22238
    漏洞原理:fastjson是阿里的开源json解析库,用来将json字符串反序列化为JavaBean类,或者将JavaBean类序列化为json字符串。在java审计中,需要关注的关键字:JSON.parse,......
  • 14-JSP原理
    14-JSP原理概述本文主要讲述JSP的原理在前面的练习中,我们知道JSP就是一个类似HTML文件的东西,只是其中可以添加java代码,来添加一些动态元素那么JSP和Servlet又是什么关......
  • package.json 与 package-lock.json 的关系
    模块化开发在前端越来越流行,使用node和npm可以很方便的下载管理项目所需的依赖模块。package.json用来描述项目及项目所依赖的模块信息。那 package-lock.json 和......
  • JS数组去重的十种方法
    JS数组去重的十种方法1、利用ES6Set数据类型去重(ES6中最常用)functionunique(arr){returnArray.from(newSet(arr))}vararr=[1,1,'true','true',true,true,1......
  • 小程序提交审核提示接口未配置在app.json文件中
    以下接口未正确配置在app.json文件中,勾选协议可继续提交,该版本发布后,用户将无法使用相关接口能力。 接口未正确配置:wx.chooseLocation、wx.getLocation    ......
  • [JSOI2007]文本生成器【AC自动机+DP】
    下定决心想要将这份爱意传达给你,与你在一起的每一刻总是那么值得珍藏,你的存在左右着我的思绪,实在是不想错过这样的美好,真的不和我在一起吗?我的学术生涯,虽然有点奇妙,......
  • JSR303数据校验及多环境切换
    4、JSR303数据校验及多环境切换SR303是什么?JSR303是一套JavaBean参数校验的标准,定义了很多常用的校验注解可以直接将这些注解加在我们JavaBean的属性上面就可以在需......
  • 轻量化时间插件moment.js的基本使用
    轻量化时间插件moment.js的基本使用npminstallmoment基本调用方式js中调用momentletnowTime=moment()//获取当前的时间和日期格式化展示moment().format()......