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 ...
随机推荐
- [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(四) -- 安装crowd 3.1.2
[原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(四) -- 安装crowd 3.1.2 本来已经安装完毕, 并使用Jira集成的OAuth账户管理, ...
- js判断访问浏览器是安卓还是ios还是微信浏览器还是微博
var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > - ...
- 使用WebClient调用第三方接口
需要调用一个第三方接口,传参返回数据 本来是很简单的一个需求,搞了一天没整好 首先在POSTMAN中测试没有问题,但是使用jquery ajax在前台就会涉及到跨域 虽然设置了 无论怎么写都会报错 C ...
- 项目管理利器maven学习笔记(二):
- JVM入门
面试过程中,问到JVM一脸懵逼,在github看了一些文章,感觉质量不错,整理了一下希望大家不吝赐教. 目前主流的jdk采用解释与编译混合执行的模式,其JIT技术采用分层编译,极大地提升了Java的执 ...
- php用PDO查询mysql数据库结果中文乱码
中文都变成问号了 解决方法:在实例化pdo对象时语句中加上charset=utf8 $db = new PDO('dblib:host=your_hostname;dbname=your_db;cha ...
- NetCore+MySql+EF 数据库生成实体模型
NetCore版本 2.1 1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装以下几个包 Mysql 版本: MySql.Data.EntityFrame ...
- mysql学习笔记--数据库预处理
一.概念 1. 预编译一次,可以多次执行.用来解决一条sql语句频繁执行的问题 2. 语法 a. 预处理语句:preapre 预处理名字 from 'sql语句' b. 执行预处理:execute 预 ...
- Exp5 MSF基础应用 20165110
Exp5 MSF基础应用 20165110 一.实践要求(3.5分) 实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践;(1分) m ...
- scikit_learn,NLTK导入分类器相关流程命令