知识点总结:

ajax是异步的javascrip和xml,用异步的形式去操作xml

访问的是服务端,即https://127.0.0.1/ 或者 https://localhost

1、创建一个ajax对象(=打开浏览器)

  存在兼容性方面的问题

  var xhr = new XMLHttpRequest();

  var xhr = new ActiveXObject('Microsoft.XMLHTTP);   IE6

  

方法一:
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} 方法二:
var xhr = null;
try{
//如果出错,则执行catch下的,并传入错误参数e
xhr = new XMLHttpRequest();
// throw new Error('错误'),为手动报错,使用较少
} catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6
}

2、open方法(=在地址栏输入地址)

  xhr.open('post','1.txt',true)

  参数:

  1、打开方式

    get :

      通过url?名称=值&名称=值的方式进行传递,即url?username=joya&sex=female

      url长度有限制,因此对传输的数据有大小限制

      安全性问题,因为在url?后面,所以数据会被浏览器缓存起来,可以通过历史记录读取到数据

    post :

      通过表头的形式来传递,chrome需要审查元素-->network下查看,格式也是 => 名称=值&名称=值

      长度没有限制

    在php中,post方式可以用$_POST[]获取,get方式可以用$_GET[]获取,两种方式都可以获取,使用$_REQUEST[]

  2、地址URL

  3、是否同步

    true :异步,非阻塞(一般使用此方法),setTimeout也是异步的

    false :同步,阻塞,前面的代码后面需要用到,此时使用同步方式

3、发送请求(=回车)

  // 如果要向表单post那样提交,需要使用setRequestHeader()添加HTTP表头,然后在 send() 方法中规定您希望发送的数据

  // xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

  xhr.send();

4、等待服务器返回内容(=等待浏览器显示数据)

  onreadystatechange 当readyState改变的时候触发

  readyState 请求状态(ajax的工作状态):

    0:(未初始化)还没有调用open()方法

    1:(载入)已调用send()方法,正在发送请求

    2:(载入完成)send()方法完成,已收到全部响应内容

    3:(解析)正在解析内容

    4:(完成)响应内容解析完成,可以在客户端调用

  responseText :ajax请求返回的内容被存放在这个属性下

xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
//status进行查错处理,即查服务器状态,为http状态码
if (xhr.status == 200 ) {
alert(xhr.responseText);
} else {
alert('出错了,error:'+xhr.status);
}
}
}

  reposeText是string类型,如果数据是类似json和数组的样子,则需要转换将string-->json/数组

    alert(JSON)  //注意:全是大写,ie7和ie6不支持JSON这个对象,解决方法:访问json官网json.org,下载javscript-->json2.js,把json2.js链接到页面

    json2.js提供两个方法:

      stringify:json/数组-->string,使用JSON.stringify()

      parse:string-->json/数组,使用JSON.parse(),如是json,名称需要用“”括起来(严格模式),即json = '{"age",10}'

post和get需要的注意事项

  get:

  1 、在IE中有缓存问题,因此需要在后面加上一个随机数/时间戳,即Math.random()/new Date().getTime()

    例如:'test.php?username=joya&age=10&' + newDate().getTime(),注:时间戳前面必须加上&

  2、如果有中文,存在编码问题,需要转码,即:encodeURI()

    例如:'test.php?username='+encodeURI('叶子')+'&age=10&' + newDate().getTime()

  post:

  1、不存在缓存和编码问题

  2、发送请求头,申请发送的数据类型

    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

    数据是放在send()中作为参数传递,即:send('username=joya&age=10')

[妙味Ajax]第一课:原理和封装的更多相关文章

  1. [妙味Ajax]第二课:实例:留言板、瀑布流

    知识点总结 瀑布流原理(固定布局) 总宽度大小固定 每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局 计算最短的一列,将Div插到最短的一列处(li里面包div)(getSho ...

  2. [妙味DOM]第一课:DOM基础概念、操作

    知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...

  3. [妙味Ajax]第三课:AJAX跨域解决方案:JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  4. [妙味 DOM] 第二课:DOM、BOM相关方法及属性

    知识点总结 获取样式.增加样式.删除样式函数的封装 表格 tHead tBodies tFoot rows 行 cells 列 表单 表单可以通过name来获取元素:表单.name值 onchange ...

  5. Ajax第一课

    <script language="javascript"></script> Javascript 函数创建     function 函数名(){    ...

  6. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  7. 妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  8. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  9. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

随机推荐

  1. [Q]“获取AutoCAD安装信息时失败...”解决方法

    “获取AutoCAD安装信息时失败...”解决方法:在“setup.exe”上右键,以管理员权限运行即可.

  2. 最简单的MFC

    #include <SDKDDKVer.h> #include <afxwin.h> #include <afxext.h> #include <iostre ...

  3. MAC OS 常用软件及开发工具

    1.各个版本的 Mac OS 链接: http://pan.baidu.com/s/1mgDtCi0 密码: 4y3u 2.Xcode xcode_4.6.3 链接: http://pan.baidu ...

  4. Java中不定参的使用规则

    Java中有时候会使用到不定参数,它的使用规则有2项: 一个方法中只能使用一个不定参数. 不定参数必须是方法中最后一个参数. 不定参数在传入的过程中会行成一个数组传入,如果不会放在最后一个,虚拟机无法 ...

  5. Chapter 2 Open Book——32

    I paused for a long moment, and then made the mistake of meeting his gaze. 我停顿了很长时间,然后错误的去对视了他的凝视 我停 ...

  6. urllib模块 | Python 2.7.11

    官方文档: https://docs.python.org/2/library/urllib.html 某博客对官方文档较全的翻译: http://h2byte.com/post/tech/relat ...

  7. 【转】【Egit】如何将eclipse中的项目上传至Git

    1.下载egit插件 打开Eclipse,git需要eclipse授权,通过网页是无法下载egit的安装包的.在菜单栏依次打开eclipse→help→install new software→add ...

  8. Zeppelin0.6.2使用hive解释器

    Zeppelin0.6.2的jdbc Interpreter 配置 1.拷贝hive的配置文件hive-site.xml到zeppelin-0.6.2-bin-all/conf下. 2.进入conf下 ...

  9. out和ref之间的区别

    首先:两者都是按引用传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  10. 一篇顺手的Ubuntu+caffe配置笔记

    主要参考: https://github.com/lbzhang/dl-setup http://ouxinyu.github.io/Blogs/20151108001.html http://www ...