首页 >  编程教程 >  javascript教程 >  正文

原生AJAX请求实例教程

 作者:潘某人SEO
1084

什么是Ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,可以不重新加载整个网页通过刷新网页部分内容达到数据的更新展示。可以有效的降低对带宽的需求,提高网页的性能;Ajax有同步和异步两种实现方式。

Ajax实例代码

前端代码--使用get请求

<html>
    <body>
        <div class="seodd"></div>
    </body>
    <script>
        var seodd = document.getElementById('seodd');
        var seodd = new XMLHttpRequest();//创建ajax对象
	seodd.onreadystatechange = function(){
		if(this.readyState == 4){//4代表得到所有数据响应
			if(this.status == 200){//服务端200,响应完成
				success(this.responseText);
			}
		}
	}	
	var url='';//数据提交地址
	seodd.open('get',url,true);//true为异步;false为同步
	seodd.send();
	function success(data){
		data = JSON.parse(data);//json转OBJ
		seodd.innerHTML = data.zan;//修改dom数据,.zan取决于后端传递多来的json数据中的参数名
	}
    </script>
</html>

ajax请求实例代码


前端代码--使用post请求

<html>
    <body>
        <form class="seodd"><input name="seodd"></form>
    </body>
    <script>
        var seodd = document.getElementById('seodd');
        var seodd = new XMLHttpRequest();//创建ajax对象
        seodd.setRequestHeader('content-type','application/x-www-form-urlencoded');
	seodd.onreadystatechange = function(){
		if(this.readyState == 4){//4代表得到所有数据响应
			if(this.status == 200){//服务端200,响应完成
				success(this.responseText);
			}
		}
	}	
	var url='';//数据提交地址
	seodd.open('post',url,true);//true为异步;false为同步
	seodd.send('name=seoddcn');
	function success(data){
		data = JSON.parse(data);//json转OBJ
		seodd.innerHTML = data.seodd;//修改dom数据,data.seodd的seodd取决于后端传递多来的json数据中的参数名
	}
    </script>
</html>

在Ajax进行post请求的时候比起get请求,需要设置请求头“setRequestHeader('content-type','application/x-www-form-urlencoded');”;同时XXX..send(),get请求直接为空即可,对于post请求则是需要把请求参数写在里面。

后端代码

$data=array(
    "seodd"=>$a //将需要返回给前端的数据以数据的形式
					);
echo json_encode($data);//将数据转化成一个json格式的数据	

关注公众号“SEO_Study”回复"ajax请求"获取代码

申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用! 本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理 本文地址:https://www.chateach.com/it/javascript/625
相关文章
  • flash、ifream、js、ajax不利于抓取收录吗

    ajax,flash,ifream,js,不利于抓取,抓取不到

    flash、ifream、js、ajax搜索引擎抓取不到,所以网站优化的时候就要去避免使用这些代码,这种想法是错误的,片面的,只要合理使用也可以帮助优化!

    1552
    • ajax
    • flash
    • ifream
    • js
    • 不利于抓取
    • 抓取不到
  • Springboot如何生成cookie,获取cookie信息

    Springboot,cookie

    Springboot如何生成cookie,获取cookie信息,cookie就是一个小体积的键值对,格式:key=value;客户端和服务器端,通常使用http协议来进行数据传输,而http协议是无状态的。也就是客户端向同一个服务器端发送的第一次Request和第二次Request,是没有关联的。需要cookie来保存一些用户信息,每次向相同的域名(domian)和路径(path)发送Request时都会携带cookie。

    945
    • Springboot
    • cookie
  • Java获取IP,如何获取到访客的真实公网ip

    Java获取IP

    springboot,java如何获取用户的真实ip地址呢?项目开发中,不管是什么应用不管是什么语言,获取ip地址是非常关键的一环,因为管是操作日志的记录还是业务的需求上都不可或缺的用到访客的ip地址,那么在java中如何获取到IP地址呢?

    843
    • Java获取IP
  • Sudo 本地提权漏洞修复

    Sudo提权漏洞,

    Unix和Linux系统Sudo 本地提权漏洞修复,国外研究团队发现sudo堆溢出漏洞(CVE-2021-3156),漏洞隐藏十年之久,普通用户可以通过利用此漏洞,在默认配置的 sudo 主机上获取root权限。

    1339
    • Sudo提权漏洞
  • 页面资源加载真实进度条的详细教程

    进度条,资源加载

    分享一个基于原生javascript语法不需要任何插件来实现进度条的真实加载,按照加载资源数量的控制进度条的变化,可以实现只要网站每加载完成一个资源进度条同步变化。给站点一个真实的进度条对于用户体验还是非常友好的,一个真实的进度条可以一定程度上可以增加用户继续等待的机率。

    1506
    • 进度条
    • 资源加载
  • Java如何生成随机字符串

    Java字符串

    Java如何生成随机字符串,先定义一个基础字符串(即生成的每一个随机字符串里的每一个字符都要包含在这个基础字符串里面),包含字符"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"。

    1189
    • Java字符串
  • .gitignore不生效问题解决方法

    gitignore不生效

    git push的时候 .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态。

    1079
    • gitignore不生效
  • JS中的indexOf方法

    indexOf

    indexOf()是js中内置的方法之一,它的功能大家都很熟悉:简单来说就是得到数据的索引,对于正则不熟练的人,是个很不错的方法。string中indexOf() 会将数值参数转换为字符再查询索引;number类型没有IndexOf() 可以转换为字符再使用;array中indexOf() 是严格比较

    701
    • indexOf
  • Laravel Module开发包安装方法

    Laravel Module

    linux环境下通过composer安装Laravel 模块化laravel-modules包,实现laravel 的模块管理器。

    1443
    • Laravel Module
  • laravel中如何获取和设置cookie操作

    laravel ,cookie操作

    在laravel框架中 cookie的优势在于,laravel在底层会对cookie值进行加密,并且使用授权码进行签名,如果客户端修改了cookie值,那么就会失效。会比直接在php中使用cookie更加严谨安全,当然为了laravel中cookie的操作方法会与php原生的方法有所区别,虽然也可以使用php原生的方法操作,但是不推荐。

    1210
    • laravel
    • cookie操作
  • OpenSSL 拒绝服务漏洞修复教程

    OpenSSL 拒绝服务漏洞

    OpenSSL 拒绝服务漏洞修复及版本升级教程。2020年12月08日,OpenSSL官方发布安全公告,披露CVE-2020-1971 OpenSSL GENERAL_NAME_cmp 拒绝服务漏洞。EDIPARTYNAME时,由于GENERAL_NAME_cmp函数未能正确处理,从而导致空指针引用,并可能导致拒绝服务。

    1069
    • OpenSSL 拒绝服务漏洞
  • 原生js 复制内容到剪切板代码实现

    js 复制内容,剪切板代

    有时候为了提升用户体验,比如在某些页面需要实现点击内容,将内容复制到剪切板,可以提升用户复制内容的操作效率;因此在实际操作中通过一定的事件触发复制功能是非常有意义的行为,下面是两种通过原生js实现复制内容到剪切板。

    1133
    • js 复制内容
    • 剪切板代
  • 拥有一个博客网站需要多少钱

    博客网站

    如果你喜欢记录生活,那么拥有一个个人的博客网站还是非常不错的,从此你不再需要遵守任何平台的规则,只需要遵守我国法律即可。人生在世短短几十年,为短暂的人生留下点痕迹,成为数字世界的终极身份证。今天潘某人SEO就为大家大致的总结一下拥有一个自己网站需要哪几步并需要多少花费。

    520
    • 博客网站
  • Spring Boot 如何解决跨域问题

    SpringBoot跨域

    SpringBoot 如何解决跨域问题方法,CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问的那个资源就会遇到跨域问题。

    751
    • SpringBoot跨域
  • 手把手教你建立一个自己的网站

    零基础建站

    本站的主要的是分享自己建站过程中遇到的各种问题和解决方案,适合没有任何基础但是想要建立自己的一个网站的朋友,其实如果想要简单的入门让一个网站跑起来是非常的简单的。如果说是采用wordpress等CMS系统来搭建一个网站的话就更加简单了。进本上只要动手能力自学能力强一点,基本上几个小时就可以让一个站点运行起来。

    1572
    • 零基础建站
  • linux环境下安装nodejs

    nodejs安装

    linux系统下安装最新版nodejs的方法,Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境。

    916
    • nodejs安装
  • Java字符串的替换replace()、replaceFirst()和replaceAll()

    java,字符串

    Java字符串的替换replace()、replaceFirst()和replaceAll(),如何匹配替换字符串中的内容。

    706
    • java
    • 字符串
  • vue框架简介及其优势

    vue框架,vue优势

    vue框架简介及其优势,Vue 是一套用于构建用户界面的渐进式JavaScript框架,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。。但是vue对于SEO并不是非常友好,及其解决方案。

    1561
    • vue框架
    • vue优势
-- 这已经是底线了,看看别的把! --