原生AJAX请求实例教程

什么是Ajax

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

Ajax实例代码

前端代码--使用get请求

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                    <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请求

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
                    <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请求则是需要把请求参数写在里面。

后端代码

php
1
                    $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搜索引擎抓取不到,所以网站优化的时候就要去避免使用这些代码,这种想法是错误的,片面的,只要合理使用也可以帮助优化!

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1891
    • ajax
    • flash
    • ifream
    • js
    • 不利于抓取
    • 抓取不到
  • java中的JDK、JRE、JVM三者的区别

    JDK,JRE,JVM

    java中的JDK、JRE、JVM三者的区别,JDK是 Java 语言的软件开发工具包(SDK);JRE(Java Runtime Environment,Java运行环境),包含JVM标准实现及Java核心类库。JVM(Java Virtual Machine),即java虚拟机, java运行时的环境,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1243
    • JDK
    • JRE
    • JVM
  • 如何解决Vue中mounted不能获取到data

    mounted获取data

    Vue中使用mounted时,无法获取到data的原因是,this无法指向data中的数据。在mounted生命周期中this指向的是window对象而不是Vue对象,所以真正找的是window对象下的data,但是window下没有data,所以就报错了。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2106
    • mounted获取data
  • laravel定义全局常量的方法

    laravel全局常量

    在 Laravel项目中有时我们会需要一些全局函数和常量,那么在laravel如何定义一个全局的常量,以及如何的使用全局常量。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1651
    • laravel全局常量
  • linux系统下使用Vue CLI脚手架安装vue3

    Vue CLI,vue3

    linux系统下使用Vue CLI脚手架安装vue3。Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前。端工作流提供了功能齐备的构建设置。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1873
    • Vue CLI
    • vue3
  • SpringBoot中的异常处理的详细教程

    SpringBoot,异常处理

    SpringBoot中的异常处理的详细教程,处理用户请求出现运行时异常时直接响应给用户的是一个错误界面,对于用户的使用体验不友好。什么是全局异常处理机制,用来解决整个系统中任意一个控制器抛出异常时的统一处理入口,如何使用全局异常处理类 implements HandlerExceptionResolver,之后重写接口中的resolveException方法。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1423
    • SpringBoot
    • 异常处理
  • php获取当前时间操作

    php获取时间

    在PHP语言中我们如何获取当前时间呢?只要通过date()和time()函数组合使用实现。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1637
    • php获取时间
  • linux换将下安装Composer的方法

    Composer安装

    linux换将下安装Composer的方法,对于需要使用laravel框架开发站点,安装Composer是非常有必要的,可以使得laravel的安装管理变得更加的方便快捷。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1384
    • Composer安装
  • Vue中基于$event实现click事件获取html元素和css样式

    click事件,$event

    Vue中实现单击click事件获取html元素和css样式的解决方法,$event是一个对象 $event是指当前触发的是什么事件(鼠标事件,键盘事件等) $event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1318
    • click事件
    • $event
  • 如何监听客户端的网络速度及质量

    网络质量

    在实际形况中,站点及应用可以满足绝对的流畅性,但是用户的网络环境千变万化,尤其是移动端用户,这种情况情况下页面加载速度的瓶颈完全就取决于用户的网络环境。通过浏览器的 Network Information API 接口中提供的Navigator对象的connection属性,来评估用户的连接速度以及设备所处的网络类型。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1476
    • 网络质量
  • 原生js 复制内容到剪切板代码实现

    js 复制内容,剪切板代

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

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1579
    • js 复制内容
    • 剪切板代
  • js中的数组元素的添加方法

    js数组添加元素

    js中的数组元素的添加方法,主要有三种方法,用索引元素添加、push( )方法、unshift()方法,push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度,修改并替换了原始数组而非生成一个修改版的新数组。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 994
    • js数组添加元素
  • laravel中如何获取和设置cookie操作

    laravel ,cookie操作

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

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1617
    • laravel
    • cookie操作
  • centos下修改ssh端口

    ssh端口,

    服务器如何修改默认的ssh端口,修改ssh默认端口是非常有必要的可以保证登陆的安全性。如何修改服务器的默认远程登陆端口呢,我们以centos系统为例子,linux等其它系统差不多请参照。服务器的默认ssh端口为22,不管是windows还是linux服务器都是22端口,可以方便我们在终端中通过sftp来链接服务器,尤其是linux系统,实现文件目录的可视化,可以更加方便的操作。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1497
    • ssh端口
  • JavaScript == 与 === 区别

    == 与 === 区别

    js中==和===的区别 ==和===的区别和一些比较规则: == 在比较类型不同的变量时,会进行数据类型转化,将二者转换成数据类型相同的变量,再进行比较。对于 string、number 等基础类型,== 和 === 是有区别的 a)不同类型间比较,== 之比较 "转化成同一类型后的值" 看 "值" 是否相等,=== 如果类型不同,其结果就是不等。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1172
    • == 与 === 区别
  • JavaScript简介

    JavaScript简介

    JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2007
    • JavaScript简介
  • laravel url路由中存在双斜杠(//)造成404问题

    laravel路由双斜杠

    解决在laravel框架下,网站的首页后面加上双斜杠(//),页面显示的尽然不是首页,是一个空白的页面状态码是200,或者报404错误。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2425
    • laravel路由双斜杠
  • 解决百度UEditor富文本编辑器回车追加P标签问题

    UEditor,百度富文本编辑器,p标签

    网站的教程很多但是都比较复杂,给大家分享一个1秒可以解决百度富文本编辑器强制自动追加P标签的问题的方法。百度富UEditor富文本编辑器有一个坑就是无论你怎么修改只要你回车或者换行了就会强行追加一个P标签,会严重的影响到我们正常排版。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 3025
    • UEditor
    • 百度富文本编辑器
    • p标签