原生ajax基础
/*
ajax对象的成员
常用属性:
responseText:以字符串形式接收服务器端返回的信息
responseXML:以Xml Document对象形式接收服务器返回的信息
readyState:返回当前请求的状态
0:刚创建ajax对象
1:已经调用open方法
2:已经调用send方法
3:已经返回部分数据
4:请求完成,数据返回完整
onreadystatechange:事件,当ajax状态readyState发生变化的时候要触发执行
【为了获得较多的状态,最好在创建好ajax对象后就设置
最多可以感知1/2/3/4 四种状态】
status:返回当前请求的http状态码【200--ok 304--请求缓存 404--没有此页面 403--禁止访问】
statusText:返回当前请求的响应行为码
常用方法;
open() 创建新的http请求
send() 把请求发送给服务端
abort() 取消当前请求
*/
1.创建ajax对象
主流浏览器方式
火狐、谷歌、苹果、Safari、Opera包括IE7以上版本的浏览器
var xhr = new XMLHttpRequest();
IE(6/7/8)方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//最原始的方式
var xhr = new ActiveXObject("Msxml2.XMLHTTP");//升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");//升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.5.0");//升级
var xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");//IE维护的最高版本
2.发起对服务器的请求
//浏览器方式请求:打开浏览器,输入请求地址,敲回车发送请求
//给ajax设置事件,接收服务器端发来的请求
xhr.onreadystatechange = function(){
if(readyState==4){
console(xhl.responseText);
}
}
//创建新的http请求(并设置请求地址)
//open(请求方式get/post,url请求地址)
xhr.open("get","XX.php");
//发送请求
//send(get-null/post-给服务器传递的信息)
xhl.send(null);
3.
var nm = document.getElementById("username").value;
ajax的get请求需要注意两个地方
//xhr.open("get","xx.php?name="+nm+"&addr=beijing")
①在url地址后面以请求字符串(传递的get参数信息)形式传递数据
②对"中文"、=、&等特殊符号处理
//在php里边可以用函数urlencode()/urldecode()对特殊符号进行编码、反编码处理
//在JavaScript里面可以通过encodeURIComponent()对传递的特殊符号(例如:$、=等)进行编码处理
//同时对"中文"也会进行编码处理
nm = encodeURIComponent(nm);
encodeURIComponent()编码后的信息是%后接两个十六进制数
ajax的post请求需要注意的四个地方
//var info = "name="+nm+"&age=23";
//xhr.send(info);
①给服务器传递数据需要调用send(请求字符串数据)方法
//以下setRequestHeader()方法必须要在open()方法后调用
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
②调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单传递数据)
③传递的中文信息无需编码,像&、=等仍需编码
④该方式请求的同时也可以传递get参数信息,同时使用$_GET接收该信息
5.同步、异步
ajax对象.open(方式 get/post , url地址 , [异步true]同步false);
ajax是可以与服务器进行(异步或同步)交互的技术之一。
异步:同一个时间点允许执行多个进程。
同步:同一个时间点只允许执行一个进程。
6.浏览器对动态程序文件缓存的处理解决:
① 给请求的地址设置随机数【推荐】
②给动态程序设置header头信息,禁止浏览器对其缓存
7.对xml的对象的接收和处理
ajax负责去服务器请求xml信息,使用responseXML属性接收
js里面的DOM技术负责处理xml信息(与处理html方式一致)
document/普通元素对象.getElementByTagName();
8.
//在JavaScript里边,把字符串"string"变为对象"object"
var obj = "{name:"kitty",age:5}";
//eval(字符串参数) 字符串参数变为表达式运行
eval("var cat ="+obj);//eval("var cat = {name:"kitty",age=5}")
console.log(cat);
9.FormData使用注意
①每个表单域必须有name属性
②不能设置setRequestHeader头
③特殊符号无需编码
④在form标签里边无需设置enctype="multipart/form-data"属性(即便有上传文件域也不需要设置)
(无刷新上传附件,FormData可以收集上传的文件域信息)
10.ajax对象->upload->onprogress
ajax对象有成员属性upload,其也是一个对象,该对象有onprogress属性。该属性是一个"事件"。该事件每间隔0.1秒就执行一次,执行的过程中会感知当前的附件上传情况,例如可以感知附件的"总大小",目前"已上传大小"等相关信息。
原生ajax基础的更多相关文章
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- [译]脱离jQuery,使用原生Ajax
脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...
- jQuery基础---Ajax基础教程(二)
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 原生Ajax使用
Ajax基础 Ajax(Asynchronous JavaScript And XML)概念:通过XMLHttpRequest对象向服务器提出请求并处理响应,进行页面的局部更新. AJAX都有哪些优点 ...
随机推荐
- virtualbox ubuntu 网络连接 以及 连接 secureCRT
参考http://luowei828.blog.163.com/blog/static/31031204201263125415257/ 用Host-Only 方案 ip: VirtualB ...
- VC++ 对话框程序响应键盘消息的处理方法的说明(非常重要)
基于MFC对话框的应用程序在响应按键消息和热键方面都力不从心,CDialog类的消息循环中去掉了TranslateAccelerator函数,因此不能响应热键:同时由于对话框上可能有很多控件,且默认情 ...
- c语言,检测一个无符号整数中是否有偶数位个1
最近在学习大牛Bryant O'Hallaron 的深入理解计算机系统,发现学了这么久的程序设计,其实有些基本的东西还不太了解,这不,这两天在恶补整数,浮点数在计算机中的表示,并且开始做上面的习题, ...
- The CLR's Thread Pool
We were unable to locate this content in zh-cn. Here is the same content in en-us. .NET The CLR's Th ...
- mac下webpagetest搭建
我的server和agent都是在mac上搭建的,所以会和linux下有些不同 一.安装配置Apache和PHP webpagetest需要使用PHP和Apache启动服务.mac默认安装了Apa ...
- spark job, stage ,task介绍。
1. spark 如何执行程序? 首先看下spark 的部署图: 节点类型有: 1. master 节点: 常驻master进程,负责管理全部worker节点. 2. worker 节点: 常驻wor ...
- datastage小结
1.当使用datastage组建 look_up时,得注意sparse功能,当primary link过来的数据关联不到时,传过来的值并不是null,而是空串.... 解决方法,可在transfer里 ...
- lamp php的ssl,ssh支持
Php支持ssl,ssh扩展: 准备:可以成功解析php 1.curl的安装 [root@localhost~]# cd /usr/local/src/ [root@localhost~]# wget ...
- JS鼠标移入,移出事件
该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...
- 16.10.17学到的Java知识
1. 例:3-2.6==0.4的值是什么?可能乍一看,感觉是返回TRUE,因为3-2.6=0.4,0.4==0.4:所以返回TRUE. 然而,上面分析在JAVA中是错的. 由于浮点数的运算在JAVA中 ...