原生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);//输出返回信息
            }
       }

 

相关文章
|
2月前
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
4月前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
4月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
57 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
5月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
47 0
|
5月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
48 0
|
5月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
40 0
|
5月前
|
JavaScript 前端开发 网络协议
|
5月前
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
41 0
|
6月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
118 0
|
6月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
65 0