原生AJAX写法实例分析
本文实例分析了原生AJAX写法。分享给大家供大家参考。具体分析如下:
虽然现在很多JS的框架提供了AJAX的调用方法,我们甚至不用去了解其具体的实现原理就可以直接调用了,但是我认为不去从最基础的层面了解一个东西,就很难做到最好。
var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE内核,这里早期IE的版本写法不同,具体可以查询下 XHR = new ActiveXObject("Microsoft.XMLHTTP"); } else { XHR = null; } if(XHR){ XHR.open("GET", "ajaxServer.action"); XHR.onreadystatechange = function () { // readyState值说明 // 0,初始化,XHR对象已经创建,还未执行open // 1,载入,已经调用open方法,但是还没发送请求 // 2,载入完成,请求已经发送完成 // 3,交互,可以接收到部分数据 // status值说明 // 200:成功 // 404:没有发现文件、查询或URl // 500:服务器产生内部错误 if (XHR.readyState == 4 && XHR.status == 200) { // 这里可以对返回的内容做处理 // 一般会返回JSON或XML数据格式 console.log(XHR.responseText); // 主动释放,JS本身也会回收的 XHR = null; } }; XHR.send(); }
希望本文所述对大家的Ajax程序设计有所帮助。
相关推荐
-
javascript原生ajax写法分享
ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: /** * 得到ajax对象 */ function getajaxHttp() { var xmlHttp; try { //chrome, Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e)
-
原生Ajax 和jQuery Ajax的区别示例分析
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: 复制代码 代码如下: <!doctype html> <
-
原生Aajax 和jQuery Ajax 写法个人总结
AJAX:即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. 一个完整的HTTP请求:由请求方式.URL.请求头和请求体组成: 一个完整的HTTP响应:由状态码.响应头.响应体组成:
-
原生AJAX写法实例分析
本文实例分析了原生AJAX写法.分享给大家供大家参考.具体分析如下: 虽然现在很多JS的框架提供了AJAX的调用方法,我们甚至不用去了解其具体的实现原理就可以直接调用了,但是我认为不去从最基础的层面了解一个东西,就很难做到最好. var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE内核,这里早期IE的版本写法不
-
javascript中AJAX用法实例分析
本文实例讲述了javascript中AJAX用法.分享给大家供大家参考.具体分析如下: 兼容地获得XMLHttpRequest对象: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest; }else if(window.ActiveXObject){ //IE浏览器 try{ //高版本,受msxml3.dll+支持 xhr = new ActiveXObject("Msxml2.XMLH
-
jQuery高级编程之js对象、json与ajax用法实例分析
本文实例讲述了jQuery高级编程之js对象.json与ajax用法.分享给大家供大家参考,具体如下: js对象 创建js对象的两种方式: 1.通过new Object创建: var p1 = new Object(); // 设置属性,和方法 p1.name = "张三"; p1.age = 13; p1.study = function(){ console.log(p1.name + "正在学习,葵花宝典"); } // 调用属性和方法 console.log
-
基于原生ajax与封装的ajax使用方法(详解)
当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo
-
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
login.onclick = function(){ var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.rea
-
php下的原生ajax请求用法实例分析
本文实例讲述了php下的原生ajax请求用法.分享给大家供大家参考,具体如下: 浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器. ajax(Asynchronous Javascript And XML)其实就是通过XHR对象,执行HTTP请求. 1.创建XHR对象 var xhr = new XMLHttpRequest(); //暂不考虑兼容 2.XHR的对象属性和方法 方法
-
Ajax异步提交数据返回值的换行问题实例分析
本文实例分析了Ajax异步提交数据返回值的换行问题.分享给大家供大家参考,具体如下: 前面分析介绍了<Javascript基于AJAX回调函数传递参数>及<IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别>,学习了ajax回调函数传参与针对不同浏览器处理中文乱码问题的方法.这里就来分析一下ajax异步提交返回值中换行问题的处理技巧. 背景介绍: 需要实现的功能是:在下拉框中选择分类,提交到PHP根据选择的分类返回该分类下的成员名称,返回值各成员姓名以换行的形式显示到tex
-
JQuery中Ajax()的data参数类型实例分析
本文实例分析了JQuery中Ajax()的data参数类型.分享给大家供大家参考,具体如下: 前面简单分析介绍了<ajax中data传参的两种方式>,对于ajax参数传递方式有了初步的了解,这里就来进一步分析一下ajax中data参数的类型. 假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>:&
-
jquery中ajax跨域方法实例分析
本文实例分析了jquery中ajax跨域.分享给大家供大家参考,具体如下: JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 方法一: jsonp之 getJSON js var url = "http://localhost/mytest/jsonp_php.php?callback=?"; $.getJSON(url, { "age": 21, "name
随机推荐
- 体验MySQL5.6.25并处理所遇到的问题
- jquery ajax 局部无刷新更新数据的实现案例
- angularjs中ng-attr的用法详解
- JavaScript中定义类的方式详解
- js实现的后台左侧管理菜单代码
- PHP在Windows IIS上传的图片无法访问的解决方法
- iOS 生成图片验证码绘制实例代码
- ASP.net基础知识之常见错误分析
- Asp.net中的数据绑定Eval和Bind应用示例
- 详解Python中的循环语句的用法
- 编写Ruby代码注释时需要注意的一些问题
- 微信小程序联网请求的轮播图
- 浅析jquery unbind()方法移除元素绑定的事件
- JS写的数字拼图小游戏代码[学习参考]
- Content-Location文件头定义方法(防止内部IP地址泄漏二法)
- PHP的面向对象编程
- vue+element-ui+ajax实现一个表格的实例
- Linux awk将文件某列按照逗号分隔的例子
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
- Python数据类型之Number数字操作实例详解