总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面。举一个小的例子:Goole搜索页面。当用户在输入框输入关键字的时候,JavaScript会把这些字符发送到服务器,然后服务器返回一个搜索建议的列表。

原生的Ajax

原生的Ajax请求离不开XHR对象,即XMLHttpRequest对象。所有现代浏览器都内建有这个对象。

创建整个对象:

var xhr = new XMLHttpRequest();

这里有个版本的差异,IE5和IE6使用ActiveX对象。不同的浏览器使用不同的对象。

var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

如果需要将请求发送到服务器,我们使用XMLHttpRequest对象的open方法和send方法。

xmlhttp.open("GET","text.txt",true);
xmlhttp.send();

open方法规定请求的类型,URL以及异步处理请求。

  • method:请求的类型:GET/POST
  • url:文件在服务器上的位置
  • async:true(异步 ),false(同步)

那到底是使用GET还是使用POST

GET比POST要快,也更简单,并且在大部分情况下都能用。

但是在某些情况下,POST也有一定的好处。

  1. 无法使用缓存文件(更新服务器上的文件或者数据库)
  2. 向服务器发送大量的数据(POST没有数据量限制)
  3. 发送包含未知字符的用户输入的时候,POST比GET更稳定也更可靠

注意:有些时候GET请求得到的缓存的结果,为了避免这个情况,有必要向URL添加信息。

xmlhttp.open("GET","text.txt?t="+Math.random(),true);
xmlhttp.send();

通过GET方法发送信息,需要向URL添加信息

xmlhttp.open("GET","text.txt?fname=bill&lname=gates",true);
xmlhttp.send();

需要像HTML表单那样POST数据,请使用setRequestHeader()添加HTTP头,然后在send方法中规定希望发送的数据。

xmlhttp.open("POST","ajax_text.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=bill&lname=gates");

虽然XHR主要用来从服务器获取数据,但它同样能用于把数据传回服务器。数据可以用GET或者POST的方式传回来,包括任意数量的HTTP头信息,这给你很大的灵活性,当你要传回的数据超出浏览器的最大URL尺寸 限制时XHR特别有用。这种情况下,你可以使用POST方法回传数据。

var url = '/data.php';
var params = [
'id=88555',
'limit=20'
];
var req = new XMLHttpRequest();
req.onerror = function(){
//出错
}
req.onreadystatechange = function(){
if(readyState == 4){
//SUCCESS
}
}
req.open("POST",url,true);
req.setRequestHeader('Content-type',"application/x-www-form-urlencoded");
req.setRequestHeader('Content-length',params.length);
req.send(params.join('&'));

服务器的响应

如果需要获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或者是responseXML属性。

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

分别对其进行解析。

原生js实现Ajax请求的更多相关文章

  1. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  2. 原生JS发送Ajax请求、JSONP

    一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...

  3. 原生js写ajax请求(复习)

    今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...

  4. 原生js实现Ajax请求,包含get和post

    现在web从服务器请求数据,很多用到Ajax,不过都是用的JQuery封装好的,之前做项目,由于无法引用JQuery,所以就只能用原生了,话不多说,请看代码. /*------------------ ...

  5. 原生js的ajax请求

    传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次 ...

  6. 原生js版ajax请求

    function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Micr ...

  7. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

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

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  9. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

随机推荐

  1. 某labs上传writeup-上传漏洞总结

    github:https://github.com/d0ef/upload-labs 第一题:通过JS判断的直接抓包改了就ok. 第二题:只要Content-Type信息为图片的就可以 第三题:通过上 ...

  2. Eclipse中SVN更改连接用户

    Eclipse中安装了SVN插件,当连接到SVN服务器后,便无法从客户端更改连接帐号 百度一下,也就知道 查看Eclipse中使用的是什么SVN Interface,位置在windows > p ...

  3. inet_select_addr

    当通过输出设备向目的地址发送报文时,如果没有源地址,则需要调用inet_select_addr来选择ip地址作为源地址: /* 选择ip地址 通过设备找到ip控制块,从ip控制块中遍历地址列表中的主地 ...

  4. linux非阻塞的socket EAGAIN的错误处理【转】

    转自:http://blog.csdn.net/tianmohust/article/details/8691644 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux中使用非阻塞的s ...

  5. 再议perl写多线程端口扫描器

    再议perl写多线程端口扫描器 http://blog.csdn.net/sx1989827/article/details/4642179 perl写端口多线程扫描器 http://blog.csd ...

  6. BZOJ 4516: [Sdoi2016]生成魔咒——后缀数组、并查集

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4516 题意 一开始串为空,每次往串后面加一个字符,求本质不同的子串的个数,可以离线.即长度为 ...

  7. 12-4 NSString

    原文:http://rypress.com/tutorials/objective-c/data-types/nsstring NSString 在本教程的内容可能我们已经看到过很多次了,NSStri ...

  8. vue的data用到this问题

    问题:在vue中用vue-awesome-swiper,在data中初始化,用到swiper一个方法onTap,然后再调vue的一个函数,用到this,可是... data() { return { ...

  9. Java学习笔记(二)——Java操作properties文件

    [前面的话] 前段时间在学习和玩java web相关的东西,对于这些技术,一边学习,一边做东西,一边总结,希望可以一边成长和有所收获.有时总是思考太多反而成为了前进的阻力,所以对于生活还是简单一些,不 ...

  10. 四十二 常用内建模块 collections

    collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: >>> ...