一、原生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相关知识总结的更多相关文章

  1. SpringMVC与ajax相关知识练习与存档

    参考文章(亲测有效): SpringMVC+ajax返回JSON串 jquery ajax例子返回值详解 AJAX $.ajax({url:路径,date:数据,}) //get请求(指定回调函数,参 ...

  2. JQuery的ajax方法获取返回值得到了值还包含了不要的html源码 (Ajax相关知识)

    因为后台使用了response.Write():这个方法,当输出完了以后,没有结束掉会继续输出,所以需要用到response.End():这样问题就解决了 jquery的ajax 除了通过url传值, ...

  3. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  4. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  5. 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...

    原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...

  6. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  7. 浅谈C#中的 async await 以及对线程相关知识的复习

    C#5.0以后新增了一个语法糖,那就是异步方法async await,之前对线程,进程方面的知识有过较为深入的学习,大概知道这个概念,我的项目中实际用到C#异步编程的场景比较少,就算要用到一般也感觉T ...

  8. web聊天相关知识

    http相关知识 http是无状态,请求,响应模式的通信模式,就是用户每次通过浏览器点击一下页面,都需要重新与web服务器建立一下连接,且发送自己的 session id 给服务器端以使服务器端验证此 ...

  9. Ajax基础知识 浅析(含php基础语法知识)

    1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...

随机推荐

  1. [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(四) -- 安装crowd 3.1.2

    [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(四) -- 安装crowd 3.1.2 本来已经安装完毕, 并使用Jira集成的OAuth账户管理, ...

  2. js判断访问浏览器是安卓还是ios还是微信浏览器还是微博

    var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > - ...

  3. 使用WebClient调用第三方接口

    需要调用一个第三方接口,传参返回数据 本来是很简单的一个需求,搞了一天没整好 首先在POSTMAN中测试没有问题,但是使用jquery ajax在前台就会涉及到跨域 虽然设置了 无论怎么写都会报错 C ...

  4. 项目管理利器maven学习笔记(二):

  5. JVM入门

    面试过程中,问到JVM一脸懵逼,在github看了一些文章,感觉质量不错,整理了一下希望大家不吝赐教. 目前主流的jdk采用解释与编译混合执行的模式,其JIT技术采用分层编译,极大地提升了Java的执 ...

  6. php用PDO查询mysql数据库结果中文乱码

    中文都变成问号了 解决方法:在实例化pdo对象时语句中加上charset=utf8 $db = new PDO('dblib:host=your_hostname;dbname=your_db;cha ...

  7. NetCore+MySql+EF 数据库生成实体模型

    NetCore版本    2.1 1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装以下几个包 Mysql 版本: MySql.Data.EntityFrame ...

  8. mysql学习笔记--数据库预处理

    一.概念 1. 预编译一次,可以多次执行.用来解决一条sql语句频繁执行的问题 2. 语法 a. 预处理语句:preapre 预处理名字 from 'sql语句' b. 执行预处理:execute 预 ...

  9. Exp5 MSF基础应用 20165110

    Exp5 MSF基础应用 20165110 一.实践要求(3.5分) 实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践;(1分) m ...

  10. scikit_learn,NLTK导入分类器相关流程命令