原生JS的Ajax

简介: 转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html1.创建一个Ajax对象      非IE6浏览器:var obj = new XMLHttpReuqest();      IE6浏览器:var obj = new ActiveXbject("Microsoft.

转自: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);//输出返回信息
            }
       }

 

相关文章
|
16天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
17 0
|
17天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
17天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
17天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
27 0
|
1月前
|
XML 前端开发 JavaScript
node.js第三天-----ajax(3)
node.js第三天-----ajax(3)
26 0
|
1月前
|
JSON JavaScript 前端开发
node.js第三天-----ajax(2)
node.js第三天-----ajax(2)
23 0
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
39 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
60 0