原生js的ajax请求

什么是ajax

　　ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统方法的缺点:

　　传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

XMLHttpRequest 对象

　　XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

五步使用法:

　　1.创建XMLHTTPRequest对象

　　2.使用open方法设置和服务器的交互信息

　　3.设置发送的数据，开始和服务器端交互

　　4.注册事件

　　5.更新界面

下面给大家列出get请求和post请求的例子

get请求：

// 步骤一：创建异步对象

var ajax = new XMLHTTPRequest()

// 步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url，可以带参数，动态的传递参数starName到服务端

ajax.open('get','getStar.php?starName='+name)

// 步骤三：发送请求

ajax.send()

// 步骤四：注册事件 onreadystatechange 状态改变就会调用

ajax.onreadystaterchange = function(){

　　if(ajax.readyState==4 && ajax.status==200){

　　　　// 步骤五：如果能够进到这个判断说明数据完美的回来了，并且请求的页面是存在的

　　　　console.log(ajax.responseText) // 输入相应的内容

　　}

post请求：

// 步骤一：创建异步对象

var xhr = new XMLHTTPRequest()

// 步骤二：设置请求的类型及url

// post请求一定要添加请求头才行，不然会报错

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

xhr.open('post','02.post.php')

// 步骤三：发送请求

xhr.send('name=fox&age=18')

// 步骤四：注册事件 onreadystatechange 状态改变就会调用

xhr.onreadyStatechange = function(){

　　// 步骤五：如果能够进到这个判断说明数据完美的回来了，并且请求的页面是存在的

　　if(xhr.readyState==4&&xhr.status==200){

　　　　console.log(xhr.responseText)

　　}

转载于:https://www.cnblogs.com/mengyage/p/9560237.html

原生js的ajax请求相关推荐

js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
原生JS写Ajax的请求函数
本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体的实现代码和详细的解释,希望对你有所帮助. 一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面: aj ...
php上js实现ajax请求,原生JS如何实现Ajax通过POST方式与PHP进行交互的方法
原生JS如何实现Ajax通过POST方式与PHP进行交互的方法发布时间:2021-04-20 11:28:22 来源:亿速云阅读:52 作者:小新这篇文章将为大家详细讲解有关原生JS如何实现Aj ...
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
原生js实现Ajax，JSONP
Ajax内部的几个执行步骤创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...

原生js的ajax请求

原生js的ajax请求相关推荐

最新文章

热门文章