原生js提交ajax请求

 1 <script type="text/javascript">
 2         window.onload = function(){
 3             var btn = document.getElementById("btn");
 4             var pcontent = document.getElementById("content");
 5             //获取XMLHttpRequest 兼容各种浏览器 包括IE6,IE5
 6             function getXmlHttp(){
 7                 if(window.XMLHttpRequest){
 8                     return  new XMLHttpRequest();
 9                 }else if( window.ActiveXObject){
10                     var version = [
11                         "MSXML2.XMLHttp.6.0",
12                         "MSXML2.XMLHttp.3.0",
13                         "MSXML2.XMLHttp"
14                     ];
15                     for(var i=0;i<version.length;i++){
16                         try { return  new ActiveXObject(version[i]);}catch (e) {}
17                     }
18                 }else{
19                     alert("您的浏览器不支持XMLHttp");
20                 }
21             }
22             btn.onclick = function(){
23                 var xmlHttp = getXmlHttp();
24                 xmlHttp.onreadystatechange = function(){
25                     if(xmlHttp.readyState == 4  ){
26                         if(xmlHttp.status == 200){
27                             pcontent.innerHTML =  xmlHttp.responseText;
28                         }else{
29                             alert("错误信息:"+ xmlHttp.statusText);
30                         }
31                     }
32                 }
33                 xmlHttp.open("GET","data.txt",true);
34                 xmlHttp.send(null);
35             }
36
37         }
时间: 2024-08-27 23:40:01

原生js提交ajax请求的相关文章

原生JS发送Ajax请求、JSONP

一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相响应数据. 废话少说上代码! <script type="text/javascript"> //调用ajax函数 ajax({ url:'./Te

原生JS发送Ajax请求

注意了,划重点了,这一题考不到算我输! 一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相应数据. 废话少说上代码! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0p

原生js的ajax请求

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

原生js实现Ajax请求

总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面.举一个小的例子:Goole搜索页面.当用户在输入框输入关键字的时候,JavaScript会把这些字符发送到服务器,然后服务器返回一个搜索建议的列表. 原生的Ajax 原生的Ajax请求离不开XHR对象,即XMLHttpRequest对象.所有现代浏览器都内建有这个对象. 创建整个对象: var xhr = new XMLHttpRequest(); 这里有个版本的差异,IE5和IE6使

原生js写ajax请求(复习)

今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还能清晰记得原生ajax的写法吗? XMLHttpRequest 对象 先来复习一下XMLHttpRequest 对象, 方    法 描    述 abort() 停止当前请求  getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回 getResponseHe

使用原生JS发送AJAX请求(XML,JSON解析)

mybutton.addEventListener('click', (e) => { let request = new XMLHttpRequest() request.onreadystatechange = () => { if(request.readyState === 4) { console.log('请求完毕') if(request.status >= 200 & request.status <= 300) { console.log('请求成功')

原生js版ajax请求

function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); }else { xhr= null; } return xhr; } function save() { var xhr = getXMLHt

原生js实现ajax封装

一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来. 作用:提高用户体验,减少网络数据的传输量 二.ajax常见运用场景 表单验证是否登录成功.百度搜索下拉框提示和快递单号查询等等. 三.Ajax原理是什么 Ajax请求数据流程,其中最核心的依赖是浏览器提供的对象xhr,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收H

原生JS实现Ajax及Ajax的跨域请求

  前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. 而,其中,用得最多的应该苏算是JQuery的Ajax了.但是,今天,影子向大家介绍的是原生js的Ajax,及跨域请求. 一. JQuery的Ajax 首先,先回忆下JQuery的Ajax写法: $.ajax({ url: , type: '', dataType: '', data: { }, s