• ajax笔记


    Ajax:Aysnchronous Javascript and xml(异步JS和XML技术)

    1. Ajax是什么(数据交互)

    是指一种创建交互式网页应用的网页开发技术
    京东 的用户名验证
    严选网站的新品首发,商品原先是8个,点击之后数量增加
    简书 
    	当浏览器滚动的时候,在底部追加新的文章
    	点击”阅读更多“的时候,在底部追加新文章
    	共同的特点:页面没有刷新,但是得到了网站服务器上最新的数据(新用户明是否注册,严选商品数量增加,简书文章数据增加)
    	上述功能的实现,就得通过AJax来去做
    	
    刷新浪微博,访问新浪页面
    购买商品:访问jd.com
    百度:baidu.com
    	共同的特点:在url地址栏输入地址,或者点击对应的链接,跳转刷新到对应的页面
    

    2. 浏览器(客户端)和服务器

    浏览器:谷歌浏览器,火狐,IE
    	访问页面
    
    服务器:就是一台(多台)电脑,这台电脑基本上没有显示器
    	提供网页内容:在服务器上某个文件夹下,存储我们写好的页面,24小时联网
    	
    	
    服务器:
    	阿里云服务器:600-700元一年
    	淘宝虚拟空间:30-100元不等
    	新浪SAE:一天1毛
    	wamp软件:将自己的电脑模拟成一台服务器
    		wamp:
    			w:windows操作系统
    			a:apache(服务器的一个软件)
    			m:mysql
    			p:php
    		安装完成:访问localhost/127.0.0.1,成功访问到页面,就是正确
    			(C:WindowsSystem32driversetc)
    	
    	开发期间本地测试,wamp就是我们最好的选择
    

    3. 浏览器和服务器的交互

    字符串
    	'hello world'
    XML:保存数据(HTML格式化页面内容输出)
    	XML也用户保存和传递数据,但是格式比较麻烦
    JSON数据
    	{“username”:"zhangsan","age":20}
    	
    	JSON属性都是双引号
    	JSON只代表数据,没有方法(函数)
    

    4. 注释

    1. wamp都装在 d:wamp下
    2. wamp所有的文件全部删除
    

    5.onreadystatechange 和 onload

    //get
    var xhr = new XMLHttpRequest();  //  创建XML HTTP协议请求
    xhr.open('GET','URL地址?参数',true|false) // 配置 true:异步传输 false:同步传输,基本上都是true异步传输
    xhr.send();发送
    xhr.onreadystatechange = functioin(){
      if(xhr.readyState == 4 && xhr.status == 200) {
      		console.log(xhr.responseText);//接受返回结果
    	}
    }
    onreadystatachange:存储函数,每当readyStata属性改变时,就会调用该函数。
    readyStata:有XMLHttpRequest的状态(0到4)
    0:请求未初始化
    1:服务器连接已建立
    2:请求已接收
    3:请求处理中
    4:请求已完成,响应已就绪
    status:200表示"ok",404表示”未找到页面“
    2、当readyStata等于4且状态为200时,表示响应已就绪
    
    xhr.onload = function(){}  // 执行完就加载
    
    
    
    //POST
    var xhr = new XMLHttpRequest();
    xhr.open('POST','url地址',true|false);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send();
    xhr.onload = function(){}
    

    6.GET和POST

    get和post
    			get:获取
    				1.所有的a链接都是get请求,如果有参数,参数会显示在URL地址的后面
    					baidu.com?username=zhangsan&age=20&sex=nan(不安全)
    				2. get请求不能传文件
    
    			post:发送
    				1.设置表单的method为post的时候,表单的值需要传递给服务器,但是不会显示在URL地址栏(相对安全)
    				2. 传送文件
    
    
    			get和post的原生Ajax请求过程没有本质的不同
    				get请求,参数直接写在URL地址栏的后面
    				post请求
    					1. 参数必须在send里面
    					2. 必须设置setRequestHeader()头信息
    
  • 相关阅读:
    [再寄小读者之数学篇](2014-06-19 满足三个积分等式的函数)
    [再寄小读者之数学篇](2014-06-19 微分等式的结论)
    我的一些武功
    TEX学习笔记
    我的一些诗词
    我的课程与学生
    [再寄小读者之数学篇](2014-06-19 三维插值公式)
    [再寄小读者之数学篇](2014-06-19 旋度公式)
    JAVA小项目实例源码—学习娱乐小助手
    可拖拽的3D盒子
  • 原文地址:https://www.cnblogs.com/luxiaoyao/p/8536022.html
Copyright © 2020-2023  润新知