首页 > 其他分享 >Ajax

Ajax

时间:2024-02-25 23:01:16浏览次数:25  
标签:xmlhttp 请求 Ajax JS AJAX ajax 页面

什么是ajax

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

  • AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

  • AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行。

  • XMLHttpRequest 只是实现 Ajax 的一种方式。

工作原理

  • 简单来说,我们之前发的请求通过类似 form表单标签,a标签 这种方式,现在通过 运行js代码动态决定什么时候发送什么样的请求
  • 通过运行JS代码发送的请求浏览器可以不用跳转页面 ,我们可以在JS代码中决定是否要跳转页面
  • 通过运行JS代码发送的请求,接收到返回结果后,我们可以将结果通过dom编程渲染到页面的某些元素上,实现局部更新

如何实现ajax请求

原生javascript方式进行ajax(了解):

<script>
  function loadXMLDoc(){
    var xmlhttp=new XMLHttpRequest();
      // 设置回调函数处理响应结果
    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();
  }
</script> 

标签:xmlhttp,请求,Ajax,JS,AJAX,ajax,页面
From: https://www.cnblogs.com/tigerWei/p/18013651

相关文章

  • jQuery $.ajax() 方法概述
    原文链接:https://www.bejson.com/apidoc/jquery/jQuery.Ajax.html通过HTTP请求加载远程数据。jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获......
  • ajax
    $.ajax({url:"http://192.168.0.59:8081/t1/count",//要发送请求的URLtype:"GET",//请求类型(默认为GET)dataType:"json",//服务器返回的数据格式(默认为智能判断)data:{},//传递到服务器的参数......
  • (学习日记)六、Ajax请求
    15.Ajax请求浏览器向网站发送请求时:GETPOST特点:页面会刷新。也可以基于Ajax向后台发送请求(偷偷发送请求)依赖jQuery编写ajax$.ajax({url:"发送的地址",type:"post",data:{n1:123,n2:456,}success:function(res){co......
  • 十九、Ajax和iFrame
    AjaxAjax向后台发请求1、下载引入jQuery2、语法格式#get$.ajax({Url:‘http://www.*****.com’,Type:‘GET’,Data:{‘k1’:’v1’},Success:function(arg){//arg是字符串类型//varobj=JSON.parse(arg)}})$.ajax({Url:‘http://ww......
  • $.ajax参数笔记
    $.ajax是jQuery中用于执行AJAX(AsynchronousJavaScriptandXML)请求的方法。这个方法允许你与服务器进行异步通信,获取或发送数据,而不需要重新加载整个页面。下面是$.ajax方法的参数详解:url类型:String描述:请求的地址(默认为当前页地址)。type类型:String描述:请求方式(post......
  • ajax批量删除功能的实现源代码
    效果展示:完整代码如下:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • SharePoint Online 使用Ajax请求超过5000条数据的列表
    前言相信大家都遇到过SharePointOnline取数据的时候,列表数据超过5000阈值的情况,下面,我们介绍下如何利用分页获取超过5000条数据的列表。正文下面是源代码,主要有两个地方要注意,一个是最开始请求top=5000,告诉请求我们要分页。第二个就是data.d.next,如果这个返回......
  • 关于 AJAX 请求跨域问题在 Vue 项目中的解决方式
    0.前言关于域,sry刚刚新建文件夹,写好了就换过来;此文为88岁高龄、入门级前端初心者专用笔记;暂时只关心AJAX请求受同源策略的影响及在Vue项目中的解决方式捏;1.必要性1.0你需要知道(1)协议、域名、端口都相同,才为同源;(2)浏览器报跨域错误,并不是服务器没有返回,而......
  • 学习AJAX时出现has been blocked by CORS policy: Cross origin requests are only su
    练习js时用到ajax,console报错:AccesstoXMLHttpRequestat‘file:///Users/XXX/Downloads/nav/nav.json’fromorigin‘null’hasbeenblockedbyCORSpolicy:Crossoriginrequestsareonlysupportedforprotocolschemes:http,data,chrome,chrome-extension,chro......
  • ajax与action,WordPress主题开发之wp_ajax_{$action}和wp_ajax_nopriv_{$action}的区
    wp_ajax_{$action}和wp_ajax_nopriv_{$action}是WordPress主题开发常用的函数,这两个函数经常用在ajax交互功能上。例如ajax表单登录,ajax提交表单等。本篇文章主要讲述了wp_ajax_{$action}和wp_ajax_nopriv_{$action}之间的区别。WordPress中AJAX请求方式在说wp_ajax_{$action}......