<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图灵</title>

	<style>

		* {

			margin: 0;

			padding: 0;

			list-style: none;

		}

		#wrap {

			width: 500px;

			margin: 100px auto 0;

		}

		#wrap input {

			width: 486px;

			height: 40px;

			padding-left: 10px;

		}

		#list {

			margin-top: 10px;

		}

		#list li {

			width: 460px;

			/*height: 40px;*/

			line-height: 40px;

			padding: 0 20px;

		}

		#list li.left {

			text-align: left;

			background: #ccc;

		}

		#list li.right {

			text-align: right;

			background: #777;

		}

	</style>

</head>

<body>

	<div id="wrap">

		<input id="ipt" type="text" placeholder="请输入你想说的话">

		<ul id="list">

			<!-- <li class="left">ME:hahahahaha</li>

			<li class="right">你是傻逼:PC</li> -->

		</ul>

	</div>

	<script>

		var ipt = document.getElementById('ipt');

		var list = document.getElementById('list');

		document.onkeyup = function (e) {

			var e = e || window.event;

			if (e.keyCode == 13) {

				if (ipt.value == '') {

					alert("请输入内容");

				} else {

					sendMsg();

					ipt.value = "";

				}

			}

		}

		function sendMsg() {

			var myMsg = document.createElement('li');

			myMsg.className = 'left';

			myMsg.innerHTML = "ME:" + ipt.value;

			list.appendChild(myMsg);

			var xhr = null;

			if (window.XMLHttpRequest) {

				xhr = new XMLHttpRequest();

			} else {

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

			}

			var url = 'http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info='+ipt.value+'&userid=1234567';

			xhr.open('get',url,true);

			xhr.send(null);

			xhr.onreadystatechange = function () {

				if (xhr.readyState == 4) {

					if (xhr.status == 200) {

						var data = JSON.parse(xhr.responseText).text;

						var pc = document.createElement('li');

						pc.className = 'right';

						pc.innerHTML = data + "：PC";

						list.appendChild(pc);

					} else {

						alert(xhr.status);

					}

				}

			}

		}

	</script>

</body>

</html>

　　

AJAX请求小项目的更多相关文章

  1. Ajax请求，跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  2. Ajax请求的几个小练习

    Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...

  3. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  4. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  5. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  6. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  7. springboot maven项目运行常见报错 及ajax请求报错

    如图所示 tomcat运行后直接停止,也不报错 原因:我的原因是controller路径配置重名或者service没有配置@Service 遇见这错找了好久问题,网上也搜不到,特此记录一下 问题2 a ...

  8. python学习(26)分析ajax请求抓取今日头条cosplay小姐姐图片

    分析ajax请求格式,模拟发送http请求,从而获取网页代码,进而分析取出需要的数据和图片.这里分析ajax请求,获取cosplay美女图片. 登陆今日头条,点击搜索,输入cosplay 下面查看浏览 ...

  9. JQuery ajax请求struts action实现异步刷新的小实例

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...

随机推荐

  1. Linux学习第三步(Centos7安装mysql5.7数据库)

    版本:mysql-5.7.16-1.el7.x86_64.rpm-bundle.tar 前言:在linux下安装mysql不如windows下面那么简单,但是也不是很难.本文向大家讲解了如何在Cent ...

  2. Appium 1.6.4 环境搭建流程(Java, Android+IOS, Windows+Mac)

    Appium1.6.4已经出来一段时间了,快速给大家串一下怎么搭建,贴了下载链接 1 基础环境: Windows + Mac: Java JDK 1.8+ (需配置环境变量),Appium1.6.4的 ...

  3. VR全景智慧城市

    随着虚拟现实产业的发展,我国对虚拟现实产业也越来越重视了.我国虚拟现实VR市场增长速度很快,市场活跃性很高,很多人都看好我国的虚拟现实VR市场,而且未来国内虚拟现实VR市场的销量还将有更大的增长.据赛 ...

  4. Java调用IDL方法总结

    Java调用IDL方法总结 Java调用IDL程序,需要先在java中加载IDL的java包(javaidlb.jar),该包不需要下载,在IDL的安装目录中可以直接找到(C:\Program Fil ...

  5. VBS

    1.msgbox脚本显示回车 语法:msgbox"123"&vbcrlf&"456"

  6. .NET中webservice如何使用，调用

    webservice 只是"面向服务"编程的一种方式,现在把所有的方式都合在一起,就叫做WCF,,,,,, 1.创建 webservice服务,在web项目中添加"web ...

  7. iOS-swift-基础篇1

    一.swift是啥?答:百度. 二.swift基础知识. 1.输出函数:print print("Hello, world!") 2.简单数据类型 变量声明:var 常量声明:le ...

  8. 用R语言做数据清理（详细教程）

    数据的清理 如同列夫托尔斯泰所说的那样:“幸福的家庭都是相似的,不幸的家庭各有各的不幸”,糟糕的恶心的数据各有各的糟糕之处,好的数据集都是相似的.一份好的,干净而整洁的数据至少包括以下几个要素: 1. ...

  9. win10下装mysql-5.7.18-winx64

    步骤1 官网下载地址:https://dev.mysql.com/downloads/mysql/ 选择手动安装版: 解压到D盘mysql文件夹下: 比以往的版本里缺少了两个.ini文件,直接copy ...

  10. 那些年我遇到的ERP顾问

    当我写下这篇随笔的时候,算起来在我从业9年的时间里,也差不多遇到了4-5拨的ERP咨询顾问,严格来说是4家ERP顾问公司.分别是:IBM.汉得.鼎捷以及盈通金服.从实施水准.技术力量.沟通技巧.做事态 ...