纯JS实现AJAX局部刷新功能

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

下面给大家介绍JS实现AJAX局部刷新功能，具体内容如下所示：

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

// 创建XMLHttpRequest对象
 var xhr=new XMLHttpRequest();

 // 请求行
 xhr.open('post','03-ajaxPost.php');
 //请求头
 xhr.setRequestHeader('Content-Type',' application/x-www-form-urlencoded');
 //请求主体 post send 设置数据
 xhr.send('name='+txt);

 //监听服务器的响应
 xhr.onreadystatechange=function(){
 if(xhr.readyState==4&&xhr.status==200){ //这里表示接受服务器的响应成功的时候
 var r=xhr.responseText;
 document.querySelector('.info').innerHTML=r;
 }
 }

以上所述是小编给大家介绍的纯JS实现AJAX局部刷新功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

  • 轻松理解JavaScript之AJAX

    摘要 AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术 一.什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 二.如何使用ajax? 第一步:创建xmlhttprequest对象 创建xmlhttprequest对象,XMLHttpRequest对象用来和服务器交换数据. var xmlhttp =new XMLHttpRequest(); 第二步:注册回调函数 onreadystatechange函数,当服务

  • ajax响应json字符串和json数组的实例(详解)

    ajax响应json字符串和json数组的实例(详解)

    最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

  • jquery拼接ajax 的json和字符串拼接的方法

    整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享. jQuery拼接字符串ajax <form id="myForm" action="#"> <input name="name"/> <input name="age"/> <input type="submit"/> </form> <s

  • JavaScript中从setTimeout与setInterval到AJAX异步

    setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },100) setTimeout(function() { console.log(3); },50) console.log(4); 打印结果是 1.4.3.2,你可能觉得理所应当,那我们再看下下面这个例子 console.log(1); setTimeout(function() { console

  • AngularJS实现ajax请求的方法

    本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • 用ajax传递json到前台中文出现问号乱码问题的解决办法

    我使用的Springmvc,在controller层传输一个json到前台,后台显示没问题,中文正常显示而到了前台 中文就变成了问号. 后来发现,因为在controller中返回json用了@ResponseBody,而spring源码中@ResponseBody 的实现类发现其默认的编码是 iso-8859-1,而项目用的编码为utf-8,所以传中文会出现乱码. 这里我使用了注解来解决: @RequestMapping(value="/echarts.do", produces =

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

  • 解决ajax不能访问本地文件问题（利用js跨域原理）

    解决ajax不能访问本地文件问题（利用js跨域原理）

    博主自己在开发一个无后台,只有前台的查询系统时,遇到一个困难,如何利用Ajax读取自己的本地json文件,百度.谷歌了下,发现大部分文章都是在说修改浏览器参数,但是自己想想,用户在使用时,还要修改浏览器的参数,这样显然降低了用户体验.自己琢磨了一段时间,发现可以利用js跨域原理来解决这个瓶颈.将之前要读取的json文件,变为js对象文件,这样就可以读取这个文件,然后写一个函数来对这个js对象进行解析. 首先说明下js跨域原理和jsonp这个技术(如果说的不详细,可自行百度.谷歌) src可以跨域

随机推荐