ajax相关知识总结
一、原生AJAX的兼容版本实现
function createXhr(){
var Xhr = null;
//浏览器的判断
if(window.XMLHttpRequest){
//ie789 chrome FF.....
xhr = new XMLHttpRequest();
}else{
//IE5.5 6
xhr = new ActiveXobject("Microsoft.XMLHttp");
}
return xhr
}
二、AJAX对象的成员
属性:
1、responseText //以字符串形式接受服务端返回的信息
2、readyState //表示ajax状态值
3、onreadystatechange //事件,该事件可以感知ajax状态readyState的变化
方法:
1、open() //创建一个新的HTTP请求
2、send() //发送请求到服务器
三、readyState的五种状态
1、0 --------创建ajax对象完毕
2、1---------有调用Open()方法
3、2---------有调用send()方法
4、3---------服务器端数据只返回了一部分
5、4---------服务器端数据全部返回,ajax请求完成
四、对特殊符合进行编码
在浏览器的地址栏里面传递一些特殊符号信息,会被误解,例如:& = 空格 中文。
在js里面可以通过encodeURIComponent()对特殊符号等信息进行编码。
六、GET请求
function getServer(){
//获取xhr
var xhr = creatXhr();
//创建请求
xhr.open("get","server.php?age=18",true);
//设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){ //if里面2个判断的位子不能变
console.log(xhr.responesText)
}
};
//发送请求
xhr.send(null); //get请求,里面要写null;
};
七、POST请求
var nm = document.getElementById("username").value;
nm = encodeURIComponent(nm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText);
}
} xhr.open('post','02.php');
//以下方法设置header头信息,作用把传递的数据组织为XML格式
//注意:要在OPEN()方法执行之后设置
//注意:post请求必须要设置header这个步骤,才能成功传值
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var info = "name="+nm+"&age=20";
xhr.send(info);
八、get和post有什么不同
1、给服务器传递的数据量不同,get是最多2K,post原则上没有限制
2、安全方面,post传递的数据相对比较安全
3、传递数据的形式不一样
get方式在URL地址后面以请求字符串形式传递参数,中间使用&符号连接
post方式是把form表单的数据获取出来以xml形式传递给服务器
九、表单提交数据的Content-type请求消息头
<form enctype=" "></form>
1、text/plain
2、application/x-www-form-urlencoded(默认的)
3、multipart/form-data(文件和图片必须设置为这个)
欢迎加入大前端交流群!群号:277942610,VIP新群
ajax相关知识总结的更多相关文章
- SpringMVC与ajax相关知识练习与存档
参考文章(亲测有效): SpringMVC+ajax返回JSON串 jquery ajax例子返回值详解 AJAX $.ajax({url:路径,date:数据,}) //get请求(指定回调函数,参 ...
- JQuery的ajax方法获取返回值得到了值还包含了不要的html源码 (Ajax相关知识)
因为后台使用了response.Write():这个方法,当输出完了以后,没有结束掉会继续输出,所以需要用到response.End():这样问题就解决了 jquery的ajax 除了通过url传值, ...
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...
原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- 浅谈C#中的 async await 以及对线程相关知识的复习
C#5.0以后新增了一个语法糖,那就是异步方法async await,之前对线程,进程方面的知识有过较为深入的学习,大概知道这个概念,我的项目中实际用到C#异步编程的场景比较少,就算要用到一般也感觉T ...
- web聊天相关知识
http相关知识 http是无状态,请求,响应模式的通信模式,就是用户每次通过浏览器点击一下页面,都需要重新与web服务器建立一下连接,且发送自己的 session id 给服务器端以使服务器端验证此 ...
- Ajax基础知识 浅析(含php基础语法知识)
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
随机推荐
- C# 异步示例代码
在 使用BackgroundWorker组件 一文中,阐述了在Winform编程中,使用BackgroundWorker组件实现异步调用,本文主要讲述利用委托实现异步. 以下描述摘抄于MSDN: 异步 ...
- IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 Industry Track Call for Papers
IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...
- JVM、redis缓存适用场景
1. 数据状态相对稳定:(针对数据本身)数据修改较少. 2. 输出的数据是相对幂等:(针对业务)多次查询期间,数据不变动.如果查询频率过高,缓存可能没有及时更新. 了解一下redis.ehcache. ...
- 基于WebGL架构的3D可视化平台—设备管理
---恢复内容开始--- 国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑 ...
- linux下用数据泵导入导出(impdp、expdp)
expdp和impdp expdp假设a用户的默认表空间是a,导出用户a所有数据: 如果是多实例 需要在命令行或终端手工指定实例 set ORACLE_SID=实例名 否则回报ORA-12560: T ...
- CancellationTokenSource 和 CancellationToken 取消线程
Main 程序[分别调用三个方法] static void Main(string[] args) { using (CancellationTokenSource cts = new Cancell ...
- 【笔记】Python基础四:迭代器和生成器
一,迭代器协议和for循环工作机制 (一),迭代器协议 1,迭代器协议:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个stopiteration异常,以终止迭代(只能往 ...
- workerman与thinkphp结合
运行workerman需要安装pcntl和event或者libevent pcntl安装方法: 以php-5.5.20为例,实际情况按自己安装的PHP目录 一. 找到PHP源码,进入 php-5.5. ...
- java数据结构分析
java数据结构分析 此文章内容参考于:http://www.cnblogs.com/ysocean/ 一.数据结构总览图 1.数组 2.链表 3.栈 4.队列 5.二叉树 6.堆 7.散列 8.红黑 ...
- commandjs、AMD、CMD之间的故事
commandjs:同步加载,只运行一次,后面使用第一次加载时运行的结果(存于缓存中),用于服务器 AMD:define(id ?,dependencies ?,factory) 异步加载,用于浏览器 ...