转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html

1.创建一个Ajax对象

非IE6浏览器:var obj = new XMLHttpReuqest();

IE6浏览器:var obj = new ActiveXbject("Microsoft.XMLHTTP");

2.连接到服务器

obj.open(请求方式,url,是否异步)

阻止缓存方式:

obj.open('get','yan.txt?name='+new Date().getTime(),true);

3.发送请求

obj.send();

4.接收返回值

请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发

主要通过readyState属性来判断有没有结束,结束了也并没有成功,status属性来判断

1.----readyState属性:请求状态

0(未初始化)还没有调用send()方法

1(载入)已经调用了send()方法,正在发送请求

2(载入完成)send()方法执行完成,已经接收到全部响应内容

3(交互)正在解析响应内容

4(完成)响应内容解析完成,可以在客户端调用了(完成不一定成功,需要status来检测是否成功)

2.---status属性:请求结果,是成功(200)还是失败(404):obj.status==200

3.---返回值responseText:从服务器返回的文本:obj.responseText(返回的为字符串)

GET方式

function  getAjax(){
var obj;
if(ActiveXObject)//判断是否是IE6
obj = new ActiveXObject("Microsoft.XMLHTTP");
else
obj = new XMLHttpRequest();
//连接服务器
obj.open('get','http://localhost:8080/yan.ashx?name=123',true);
//发送请求
obj.send();
obj.onreadystatechange=function(){
if(obj.readyState===4&&obj.status===200)//如果接收完成并且请求成功
console.log(obj.responseText);//输出返回信息
}
}

POST方式

 function postAjax(){
var obj;
if(ActiveXObject)//判断是否是IE6
obj = new ActiveXObject('Microsoft.XMLHTTP');
else
obj =new XMLHttpRequest();
//连接服务器
obj.open('post','http://localhost:8080/yan.ashx?name=123',true);
//设置头信息
obj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送请求,传递数据
obj.send({name:'123'});
obj.onreadystatechange = function(){
if(obj.readyState===4&&obj.status===200)//如果接收完成并且请求成功
console.log(obj.responseText);//输出返回信息
}
}

原生JS的Ajax的更多相关文章

  1. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  2. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  3. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

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

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

  5. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  6. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  8. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

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

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

  10. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. [转载] Gossip算法学习

    转载自http://blog.csdn.net/yfkiss/article/details/6943682/ 1. 概述gossip,顾名思义,类似于流言传播的概念,是一种可以按照自己的期望,自行选 ...

  2. vue初级知识总结

    从我第一篇博客的搭建环境开始,就开始学习vue了,一直想将这些基本知识点整理出来,但是一直不知如何下手,今天刚好实战了两个小demo,所以就想趁这机会将以前的一起整理出来,这是vue最基础的知识,我有 ...

  3. python基础教程——函数

    定义函数 //abstest.py def my_abs(x): if x >= 0: return x else: return -x 在该文件的当前目录下启动python解释器,用 from ...

  4. Swarm 如何实现 Failover?- 每天5分钟玩转 Docker 容器技术(98)

    故障是在所难免的,容器可能崩溃,Docker Host 可能宕机,不过幸运的是,Swarm 已经内置了 failover 策略. 创建 service 的时候,我们没有告诉 swarm 发生故障时该如 ...

  5. Mysql语句查询优化

    其实对Mysql查询语句进行优化是一件非常有必要的事情. 如何查看当前sql语句的执行效率呢? 1.建一张学生表 CREATE TABLE `student` ( `stu_id` ) NOT NUL ...

  6. 自学python笔记(二)

    一:在Python的交互式命令行写程序,好处是一下就能得到结果,坏处是没法保存,下次还想运行的时候,还得再敲一遍.所以,实际开发的时候,我们总是使用一个文本编辑器来写代码,写完了,保存为一个文件,这样 ...

  7. 【机器学习】彻底搞懂CNN

    之前通过各种博客视频学习CNN,总是对参数啊原理啊什么的懵懵懂懂..这次上课终于弄明白了,O(∩_∩)O~ 上世纪科学家们发现了几个视觉神经特点,视神经具有局部感受眼,一整张图的识别由多个局部识别点构 ...

  8. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

  9. 熟悉Objective—C

    1.oc使用消息结构而非函数调用 使用消息结构的语言,运行时所应执行的代码由运行环境来决定,而是用函数调用的语言,则由编译器决定.函数调用:如果调用的函数是多态的,那么在运行时就要按照“虚方法表”来查 ...

  10. ssh中Hibernate懒加载,session问题的学习与理解

    交代本项目中要求获取session的方式如下: public Session getCurrentSession() { // 增删改使用的session,事务必须是开启的(Required,即pro ...