美文网首页
html5之ajax学习(一)

html5之ajax学习(一)

作者: Xcode8 | 来源:发表于2016-07-17 22:42 被阅读89次

一、基础知识点了解

1.内存:程序运行首先在磁盘->内存->CPU(写内容反过来);
2.协议:计算机之间的特定的默认规则关系(程序员与程序员、程序员和计算机、计算机和计算机等)(协议是双方事先约定好的规则);
3.网络:多方之间进行的通信;IP地址:计算机的标示符、端口:计算机的应用程序、域名:IP地址的别名(多对一、一对一)DNS:域名解析;
4.环境配置:安装wamp(苹果电脑是mama m:mac 操作系统 apache:提供网页的服务的应用程序 m:mysql p:php)来演示静态页面访问效果
5.静态网站和动态网站:.html静态网站:可维护性很差;动态网站php jsp .net python 动态的生成html页面
例如:动态的网站

<?php
$apple = '11';
//根据取到的参数,动态的加载数据
$flag= $_GET['param'];
if($flag == 1){
  echo'<div>'.$apple.'</div>';
}else{
  echo'<div> jiayou</div>';
}
?>

知识点补充:
B/S browser浏览器 server服务器
C/S client客户端 server服务器

二、同步和异步---异步效果iframe.web_recv

实例登录页面讲解:


前端代码

<form action = "../dizhi.php" method= "post" target="my frame">

用户名:<input type = "text" value="username">

密码:<input type = "password" value="password">

<input type="submit" value="提交">

</form>

<iframe name="myframe"></iframe>

后端代码

 <?php
$flag = 1;
$username = $_POST['username'];
$password = $_POST['password'];
 //访问服务器,返回用户名和密码数据
if($flag == 1){
  echo'用户名'.$username.'密码'.$password;
}else{
  echo 0;
}
?>

三、原生ajax的通讯设置

Ajax的运行环境:服务器
//1.手机
var ajax = new XMLHttpRequest();
//2.拨号
ajax.open("get","test.txt",true);
//3.发送
ajax.send(null);
//4.检测状态-回调函数
ajax.onreadystatechange = function(){
  //发送状态4为成功
  if(ajax.readyState == 4){
      //返回数据成功
      if(ajax.status >=200&&ajax.status<=207||ajax.status==304){
        //返回的具体的内容
        alert(ajax.responseText);
      }
  }
}
3.1 ajax.readyState状态值
0 - (未初始化)还没有调用send()方法 
1 - (载入)已调用send()方法,正在发送请求 
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 
3 - (交互)正在解析响应内容 
4 - (完成)响应内容解析完成,可以在客户端调用了 
3.2ajax.status
参考这篇文章http://blog.csdn.net/libertea/article/details/11059425

    持续更新中......

相关文章

网友评论

      本文标题:html5之ajax学习(一)

      本文链接:https://www.haomeiwen.com/subject/uhfpjttx.html