ajax详解

最新推荐文章于 2024-02-17 13:45:00 发布
转载 最新推荐文章于 2024-02-17 13:45:00 发布 · 521 阅读 · 1
文章标签：

#ajax

Ajax: asynchronous JavaScript and xml (异步javascript和xml) 
其是可以与服务器进行(异步/同步)交互的技术之一。 
ajax的语言载体是javascript。其是浏览器的一个技术 
最大特点：页面不刷新(用户体验非常好)

创建

<script>
//主流浏览器方式创建
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维护的最高版本

</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

考虑浏览器兼容

if(typeof XMLHttpRequest !== 'underfind'){
    //1.主流的浏览器
    var xhr=new XMLHttpRequest();
} else {
    //IE(6/7/8)
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    var xhr=new ActiveXObject("Msxml2.XMLHTTP");
    var xhr=new ActiveXObject("Msxml2.XMLHTTPP.3.0");
    //var xhr=new ActiveXObject("Msxml2.XMLHTTPP.5.0");
    var xhr=new ActiveXObject("Msxml2.XMLHTTPP.6.0");
    alert(xhr);   //[object]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

发起请求

  1. 创建ajax对象
  2. 创建一个新的http请求协议,并设置请求的服务器端地址 
    对象.open(请求方式get/post,url服务器端地址); 
    xhr.open(‘get’,’./02.php’); //这里xhr就是上面 ajax对象,后面就是处理文件
  3. 把http请求发送给服务器 
    对象.send(get-null/post请求数据); 
    xhr.send(null); //这是get这样写,post见后面

接受响应

ajax可以接收什么信息？ 
答：浏览器可以接收的信息ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等等。 
ajax接收返回的信息,需要结合readyState/onreadystatechange/responseText等属性一并操作： 
onreadystatechange事件最多感知4种状态改变信息:

<script>
var xhr=new XMLHttpRequest();   //创建对象
    xhr.onreadystatechange=function()   {
    console.log(xhr.readyState);    //1,2,3,4状态信息
}
xhr.open(‘get’,’./02.php’); 
xhr.send(null); 
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

4种状态 
4种状态

常用属性和方法

属性： 
responseText: 以字符串形式接收服务器端返回的信息 
readyState:ajax对象状态 
0: 创建ajax对象 
1: 有调用open方法 
2: 有调用send方法 
3: 只返回一部分数据 
4: 数据返回完整

onreadystatechange: 
是ajax的”事件”，在readyState状态发生变化的时候被触发 
为了感知最多的状态信息，要设置在对象创建完毕之后 
最多可以感知”1/2/3/4”标志状态信息

方法： 
open()创建新的http协议(请求方式、地址) 
send()发送请求(post请求数据)

手册截图 
 

get和post

ajax对象.open(get/post, 请求地址); 
不同: 
① 给服务器传递数据量 
get方式的大小是受限于浏览器，大部分浏览器是2k的限制 
每个浏览器的限制不一样 chrome就是8K 
http://网址/index.PHP?name=tom 
上述请求通过get方式传递了9个字节的信息 
1024字节 = 1k 
post原则没有限制，php.ini对其限制为8M 
② 安全方面，post传递数据较安全 
③ 传递数据的形式不一样 
get方式在url地址后边以请求字符串形式传递参数 
http://网址/index.php?name=tom&age=23&addr=beijing 
蓝色部分就是请求字符串，就是一些“名-值”对，中间使用&符号连接。 
post方式是把form表单的数据给请求出来以xml形式传递给服务器

get

ajax之get请求需要注意的两个地方： 
① 在url地址后边以请求字符串(传递的get参数信息)形式传递数据。 
② 对中文、=、&等特殊符号需要编码处理 
对特殊信息的处理： 
在浏览器里通过get参数传递一些特殊符号信息会被误解混淆，例如 & = 等，浏览器会把这样的信息当做get参数的一部分而进行一个错误的解析，为了避免这种情况发生，可以对该信息进行编码处理。有的浏览器传递中文会出现不识别问题，也可以进行编码处理。 
(编码后的信息是相对底层的信息，浏览器会自动识别，获取的时候无需反编码) 
①．在php里边可以函数 urlencode()/urldecode()对特殊符号进行编码、反编码处理 
②．在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。 
(以上红色函数可以把”特殊符号、中文”转变为浏览器可以识别不会混淆的信息。 
编码后的信息为%号后接两个十六进制数) 
 
这个函数编码一次,再进行编码是一样的

post

ajax之post请求需要注意的四个地方： 
① 给服务器传递数据需要调用send(请求字符串数据)方法 
② 调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单传递数据) 
③ 传递的中文信息无需编码，特殊符号像 &、=等 仍需要编码 
④ 该方式请求的同时也可以传递get参数信息，同样使用$_GET接收该信息 

同步和异步

ajax对象.open(方式get/post, url地址, [异步true]/同步false); 
ajax是可以与服务器进行(异步或同步)交互的技术之一。 
异步：同一个时间点允许执行进程. 
同步：同一个时间点只允许执行一个进程

什么时候使用同步请求? 
ajax绝大多数情况下进行异步请求，但是有的时候也要使用“同步请求”(其不能被取代)。例如页面有两部分内容，①ajax请求内容 和 ②正常的html内容输出，如果html的输出内容包括ajax请求的内容，就需要使得ajax请求完成了再进行html内容的输出，这样就要设置两者一前一后调用(而非同时调用)，既要进行同步请求。

xml接受和处理

客户端(javascript+dom)<———ajax<———-服务器端的xml信息 ajax负责请求xml和接收xml信息，dom负责处理xml信息

<body>
<div id="result"></div>
</body>
<script>
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4)   {
        var xmldom=xhr.responseXML;
        var msgs=xmldom.getElementsByTagName('msg');
        var s='';
        for(var i=0;i<msgs.length;++i)  {
            var sder=msgs[i].getElementsByTagName('sender')[0].firstChild.nodeValue;
            var jie=msgs[i].getElementsByTagName('jie')[0].firstChild.nodeValue;
            var cnt=msgs[i].getElementsByTagName('content')[0].firstChild.nodeValue;
            s+="发送者:"+sder+".接收者:"+jie+".消息:"+cnt+"<br />";
        }
        document.getElementById('result').innerHTML=s;
    }
}
xhr.open('get','./test.xml');
xhr.send(null);
</script>
<?xml version="1.0" encoding="utf-8" ?>
<messages>
    <msg>
        <sender>tom</sender>
        <jie>mary</jie>
        <content>晚上一起去吃饭吧</content>
    </msg>
    <msg>
        <sender>mary</sender>
        <jie>tom</jie>
        <content>不吃了,要去打球</content>
    </msg>
</messages>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

JSON

json在javascript里边就是字面量对象 
var obj = {名称:值，名称:值，名称:function(){}}

php生成json信息 
json_encode(数组/对象)————>生成json信息 
其中传进去一维数组是返回中括号的,其他是大括号.都是string类型 
(json信息在php中的数据类型是字符串)

php处理json 
json_decode(json信息，boolean); 反编码json信息 
对json字符串信息进行反编码，变为当前语言可以识别的信息。对json字符串要求单引号定义 
json_decode(json字符串,true)—>array 
json_decode(json字符串,[false])—>object//基类

javascript接收处理json信息 
ajax获得接口信息，javascript本身处理json信息 
通过eval()把接收的json字符串变成真实的对象信息

js中把字符串对象变为实体对象信息 
var obj=”{name:’kitty’,age:5}”; 
eval(“var cat=”+obj); 
eval(“var cat={name:’kitty’,age:5}”);

<button onclick="f1()">触发</button>
<script>
function f1(){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            eval("var cat="+xhr.responseText);
            console.log(cat.city);
            console.log(cat.wind);
            console.log(cat.temp);
        }
    }
    xhr.open('get','./test.php');
    xhr.send(null);
}
</script>
<?php
$jin_weather=array(
    'city'=>'baidu',
    'wind'=>'south',
    'temp'=>26
);
$result=json_encode($jin_weather);
echo $result;
?>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

无刷新表单提交和进度条

ajax对象有成员upload，该upload成员是一个对象，本身有onprogress事件 
该事件每间隔100ms左右就执行一次，执行的时候可以感知附件已经上传和总大小等信息， 
使得“已经上传大小”和“总大小”做对比可以获得上传附件的百分比，进而就可以设置进度条。 

利用新技术FormData表单数据对象，可以实现快速收集表单信息。 
FormData是HTML5的新技术，在主流浏览器都可以正常使用。 
可以利用FormData实现附件信息的收集:普通表单域 和 上传文件域 均可以收集

FormData使用注意事项: 
1,无需使用setRequestHeader()方法 
2.要求每个表单域里面必须有name属性 
3.表单域内内部有特殊符号($=&)无需编码 
4.在form标签里边无需设置enctype=”multipart/form-data”属性(即使有上传文件域也不需要设置)

<script type="text/javascript">
//javascript+ajax无刷新方式form表单提交
window.onload = function(){
     var fm = document.getElementsByTagName('form')[0];
     //表单提交事件
     fm.onsubmit = function(evt){
     //① 收集用户输入的表单域信息[FormData]
     var fd = new FormData(fm);//普通表单域 + 上传文件域信息
     //② 并把收集的信息提交给服务器端[ajax]
     var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function(){
     if(xhr.readyState==4){
           alert(xhr.responseText);
        }
   }
xhr.upload.onprogress = function(evt){
     //该事件每间隔100ms左右就执行一次，
    //并可以通过事件对象感知附件信息
   //附件已经上传大小
     var lod = evt.loaded;
    //附件总大小
     var tal = evt.total;
     //上传百分比
    var per = Math.floor((lod/tal)*100) + "%";
     //给son的div设置宽度百分比                   document.getElementById('son').innerHTML= per;
document.getElementById('son').style.width = per;
}
     xhr.open('post','./06.php');
    xhr.send(fd);
     //阻止浏览器form表单的提交动作
     evt.preventDefault();
     }
}
</script>
<style type="text/css">
#pat {width:460px; height:40px;border:4px solid blue;}
#son {width:0; height:100%; background-color:lightblue;}
</style>
</head>
<body>
   <h2>用户注册(无刷新方式附件上传)</h2>
   <form method="post" action="./1001.php">
   <p>用户名：<input type="text" id="mingzi" name="username" /></p>
    <p>密码：<input type="password" id="mima" name="userpwd" /></p>
    <p>邮箱：<input type="text" id="youxiang" name="useremail" /></p>
   <div id="pat"><div id="son"></div></div>
   <p>头像：<input type="file" id="touxiang" name="userpic" /></p>
    <p><input type="submit" value="注册" /></p>
</form>
</body>

<?php
if($_FILES['userpic']['error']>0){
    echo "false";
}else {
    echo "true";
}
?>
ajax
08-05
NULL 博文链接：https://mytdyhm123456.iteye.com/blog/2037126
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
AJAX（详解）
冰霜的博客
09-11 3089
AJAX 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 对AJA
Vue_异步加载_vue-resource（不再维护）
桃花扇的博客
11-02 746
写在前面：vue-resource可以发送ajax，实现异步加载，但是Vue官方已经不再维护这个库了。 vue-resource依赖于vue，因此要先引入vue，再引入vue-resource。正确引入vue-resource后，再vue全局上会挂载一个$http方法，其上有一系列方法，每个HTTP请求类型都会对应一个方法。且vue-resource使用了promise，所以$http中的方法的返回值是一个promise。 1.请求方法 （1）POST请求 post请求用于提交数据 常用data格
Ajax详解及其案例分析
10-24
Ajax（异步JavaScript和XML）是一种技术方案，它使得Web应用能够快速地更新部分网页而不必重新加载整个页面。Ajax技术的核心是XMLHttpRequest对象，它是浏览器提供的一个API，用于在后台与服务器交换数据。 本文...
网页基础开发指南：HTML、CSS、JavaScript、JSON与Ajax详解
最新发布
03-27
最后介绍了Ajax技术及其应用场景，展示了如何使用原生XMLHttpRequest、jQuery和Axios进行异步请求。 适合人群：适用于初学者和有一定经验的前端开发人员，帮助他们全面掌握网页开发的基础知识和技术。 使用场景及...
Ajax总结篇
上下求索
12-23 708
原文出处 http://blog.poetries.top/2016/11/26/Ajax-summary 本文主要总结整理Ajax的一些常用的基础知识，适合初学者。一、Ajax简介、优劣势、应用场景以及技术 Ajax简介 :Asynchronous Javascript And XML （异步的 JavaScript和XML） 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所
AJAX 详解
m0_61869253的博客
02-17 1525
怎样创建xmlHttpRequest对象？怎样通过get、post传递传递数据？怎样控制http头信息？通过ajax能传递什么格式的数据？怎样接收服务器传递的数据？怎样控制数据接收的进度？如果控制数据传递过程中的错误？关于跨越传输的问题？a. AJAX是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
ajax 详解
wangboa123的专栏
05-24 968
这两天工作需要用到ajax，就在w3c上面对ajax进行了全面的学习，并将学习内容记录下来。后来发现可以去api.jquery.com上面，有更详细的解释。   Ajax 基础 1.      Ajax = asynchronous javascriptand xml(异步javascript和xml) 2.      Ajax 历史 Ajax 是google在2005年使用
AJAX详解
lanHeard的博客
03-05 487
AJAX 1.什么是AJAX Asynchronous Javascript And Xml 异步的 JS 和 Xml Xml ： eXtensible Markup Language 早期是做 前后端数据交互格式 由于结构繁琐，后来就被抛弃 ...被JSON所取代 AJAX:通过JS 异步的项服务器发送请求并接受响...
ajax 所有属性及其用法，附带小例子
zhang150114的博客
05-23 458
1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 4.asyn...
《Ajax 详解》电子书深度解析及其技术应用
《Ajax 详解》电子书chm是一本详细讲解Ajax技术的电子图书，它在《四天学会Ajax》的基础上进行了扩展，进一步深入地介绍了Ajax技术的各个方面。下面将详细解读该电子书所包含的核心知识点： ### Ajax简介 Ajax...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值